Выпадающее меню на CSS

Выпадающее меню на CSS

Код

  1. HTML: 
    <ul class="menu">
	<li class="menu-title">Menu</li>
	<li class="menu-items">
		<ul>
			<li><a href="#1">Item 1</a></li>
			<li><a href="#2">Item 2</a></li>
			<li><a href="#3">Item 3</a></li>
		</ul>
	</li>
</ul>
  2. CSS: 
    .menu {list-style: none;}
.menu-items {background: #fff; display: none; position: absolute;}
.menu-items:hover {display: block;}
.menu-title:hover + .menu-items {display: block;}
.menu
list-style: none;
скрываем маркер названия меню.
.menu-items
background: #fff;
задаём блоку с пунктами белый (#fff) фон.
display: none;
по умолчанию скрываем его.
position: absolute;
делаем его абсолютно позиционированным, чтобы при раскрытии меню он не отодвигались следующие за ним элементы.
.menu-items:hover
display: block;
указываем, что отображать блок с пунктами нужно как блочный элемент, если на нём находится курсор, иначе он исчезнет, когда курсор будет отведён в сторону с названия меню, например, на пункты.
.menu-title:hover + .menu-items
display: block;
раскрываем блок с пунктами, когда курсор наведён на название меню.

Результат

Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto, Safari.

↑
↓