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

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

<code css>
/* 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; }
</code>

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

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

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

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

<code css>
/* 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; }
</code>

Высота меню ''24px''.

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

<code css>
.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; }
</code>

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

Строчка:

<code css>
.menu-h-d li li { float: none; border-width: 1px 1px 0px 1px; }
</code>

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

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

<code css>
.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; }
</code>

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

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

<code css>
.menu-h-d li:hover ul ul,
.menu-h-d li:hover ul li:hover ul ul { display: none; }
</code>

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

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

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

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

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

<code css>
/* Horizontal Drop Up Menu
------------------------------ */

.menu-h-d.d-up ul { bottom: 22px; }
.menu-h-d.d-up ul ul { bottom: -1px; }
</code>

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

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