Создание выпадающего меню - HTML и CSS

Fedor666 · 16.07.2012, 14:12

Доброго всем времени суток!

Вот, хочу меню...

Код HTML:

<html>
<head>
<style>
.menu li{margin:0;padding:0;list-style:none;width:100px;display:inline-block;}
.menu li ul{display:none;}
.menu li:hover ul{display:table-footer-group;}
</style>
</head>
<body>
<ul class="menu">
	<li>Файл
		<ul>
			<li>Открыть</li>
			<li>Сохранить</li>
			<li>Выход</li>
		</ul>
	</li>
	<li>Правка
		<ul>
			<li>Копировать</li>
			<li>Вырезать</li>
			<li>Вставить</li>
		</ul>
	</li>
	<li>О программе</li>
</ul>
</body>
</html>

Но вот незадача - стилей всяких миллионы, а я в них полный лох.

Потом раскрашу конечно и курсор сменю, но основная проблема в том, что при выпадании меню оно раздвигает содержимое страницы, а должно накладываться поверх.
Уважаемые граждане, какой стиль надо добавить? А поскольку я изучаю CSS уже целых три часа, то и вообще рад любым рекомендациям.

З.Ы. Примеры из тыр-нета все какие-то слишком навороченные, накрученные и, типа, "ну_да_чего_же_я_крут" на 5 тыс. строк...

Naive · 16.07.2012, 16:43

position:relative для родительского LI
и position:absolute для дочернего UL
Положение UL можно будет задавать свойствами left, top, right, bottom в любимых единицах относительно левого верхнего угла родительского LI.

16.07.2012, 14:12	#1
Fedor666 Пользователь Регистрация: 22.02.2010 Сообщений: 71	Создание выпадающего меню Доброго всем времени суток! Вот, хочу меню... Код HTML: <html> <head> <style> .menu li{margin:0;padding:0;list-style:none;width:100px;display:inline-block;} .menu li ul{display:none;} .menu li:hover ul{display:table-footer-group;} </style> </head> <body> <ul class="menu"> <li>Файл <ul> <li>Открыть</li> <li>Сохранить</li> <li>Выход</li> </ul> </li> <li>Правка <ul> <li>Копировать</li> <li>Вырезать</li> <li>Вставить</li> </ul> </li> <li>О программе</li> </ul> </body> </html> Но вот незадача - стилей всяких миллионы, а я в них полный лох. Потом раскрашу конечно и курсор сменю, но основная проблема в том, что при выпадании меню оно раздвигает содержимое страницы, а должно накладываться поверх. Уважаемые граждане, какой стиль надо добавить? А поскольку я изучаю CSS уже целых три часа, то и вообще рад любым рекомендациям. З.Ы. Примеры из тыр-нета все какие-то слишком навороченные, накрученные и, типа, "ну_да_чего_же_я_крут" на 5 тыс. строк... Друзья бывают близкие, далекие и недалекие...

16.07.2012, 16:43	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	position:relative для родительского LI и position:absolute для дочернего UL Положение UL можно будет задавать свойствами left, top, right, bottom в любимых единицах относительно левого верхнего угла родительского LI. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
панель выпадающего меню	violettta	HTML и CSS	2	15.10.2011 17:21
Хоткей для вызова выпадающего меню	Namolem	Помощь студентам	0	17.05.2011 16:24
Что прописать в CSS для правильного отображения выпадающего меню?	webx	HTML и CSS	0	05.05.2011 11:05
Глюк выпадающего меню в IE	Alexey_kor	HTML и CSS	2	08.04.2011 15:54
центрирование горизонтального выпадающего меню	deface2k9	HTML и CSS	2	23.08.2010 16:21