Горизонтальное меню

Класс class="menu-h" — создаёт простое горизонтальное меню.

/* Horizontal Menu
------------------------------ */

.menu-h { overflow: hidden; border-left: 1px solid #ccc; }
.menu-h li { float: left; list-style: none; padding: 0 .8em; border-right: 1px solid #ccc; }

Использовать его в деле так же просто:

<ul id="menu" class="menu-h">...</ul>

Горизонтальное многоуровневое выпадающее меню

Класс class="menu-h-d" — создаёт горизонтальное меню, с вертикальными выпадающими подменю. Уровень вложенности - 3 уровня.

/* Horizontal Drop Down Menu
------------------------------ */

.menu-h-d { min-height: 24px; border-left: 1px solid #ccc; }
.menu-h-d li { float: left; display: block; position: relative; border: 1px solid #ccc; border-width: 1px 1px 1px 0px; list-style: none; }
.menu-h-d a { text-decoration: none; padding: 2px 10px; display: block; }

.menu-h-d ul { display: none; position: absolute; top: 22px; left: -1px; width: 160px; background: #fff; border: 0; border-bottom: 1px solid #ccc; }
.menu-h-d ul ul { left: 100%; top: -1px; }

.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }

.menu-h-d li:hover { background: #ccc; }
.menu-h-d a:hover { color: #fff; }

.menu-h-d li:hover ul,
.menu-h-d li:hover ul li:hover ul,
.menu-h-d li:hover ul li:hover ul li:hover ul { display: block; }

.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }

Позиционирование выпадающих меню осуществляется строками:

.menu-h-d ul { display: none; position: absolute; top: 22px; left: -1px; width: 160px; background: #fff; border: 0; border-bottom: 1px solid #ccc; }
.menu-h-d ul ul { left: 100%; top: -1px; }

Первая строка .menu-h-d ul {…} задаёт ширину выпадающих меню(160px) и скрывает все вложенные списки. Вторая, .menu-h-d ul ul {…}, смещает меню следующего уровня вправо, на ширину предыдущего уровня, и на 1 пиксель вверх(так как рисуется рамка вокруг выпадающих меню).

Строчка:

.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }

Отключает плавающее свойство во вложенных списках. Ведь нам нужны вертикальные выпадающие меню, не правда ли?

Процесс выпадания вложенных меню описывается строчками:

.menu-h-d li:hover ul,
.menu-h-d li:hover ul li:hover ul,
.menu-h-d li:hover ul li:hover ul li:hover ul { display: block; }

При необходимости можно легко расширить количество поддерживаемых вложенных уровней до требуемого количества.

Следующий код является сдерживающим фактором, против появления сразу всех вложенных меню в одной ветке, благодаря ему подуровни появляются по мере продвижения мышки вглубь структуры. Этот код прячет вложенные уровни у текущего(li:hover) элемента меню:

.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }

Пример использования:

<ul id="menu" class="menu-h-d">…</ul>

Горизонтальное многоуровневое выпадающее вверх меню

Класс class="menu-h-d.d-up" — создаёт горизонтальное меню, с выпадающими вверх подменю.

Для этого используется весь предыдущий код и дополнительно несколько правил, позиционирующие вложенные меню по свойству bottom:

/* Horizontal Drop Up Menu
------------------------------ */

.menu-h-d.d-up ul { bottom: 22px; }
.menu-h-d.d-up ul ul { bottom: -1px; }

Пример использования:

<ul id="menu" class="menu-h-d.d-up">…</ul>