как создать простое горизонтальное меню на css

#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}

#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}

#nav li ul li { list-style-type:none; margin:10px 0 0 0;}

#nav li ul { margin:0px; padding:0px; display:none;}

#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav > li:hover ul { display:block; }

position:relative; padding:10px; width:100px;}

#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;

#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}

background: transparent url(header_bkg.png) repeat-x scroll top center;}

#header { height:120px; position:relative;

Давайте рассмотрим CSS код:

Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).

Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:

Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.

Вариант 1 - Выпадающее горизонтальное меню

Если вам нужно простое горизонтальное меню. Читаем статью о создании . Освоив основы приступайте к созданию выпадающего меню.

Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.

CSS меню: выпадающее горизонтальное меню на css

CSS меню: выпадающее горизонтальное меню на css