===== Вертикальное меню =====

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

<code css>
/* Vertical Menu
------------------------------ */

.menu-v { border-top: 1px solid #ccc; }
.menu-v li { padding: 2px 0; list-style: none; border-bottom: 1px solid #ccc; }
.menu-v li ul { padding-left: 1em; margin-top: 2px; }
.menu-v li li { border: none; border-top: 1px solid #ccc; }
</code>

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

<code css>
.menu-v li ul { padding-left: 1em; margin-top: 2px; }
</code>

Для создания меню, достаточно подключить его к списку:

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

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

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

<code css>
/* Vertical Drop Down Menu
------------------------------ */

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

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

.menu-v-d li ul { display: none; position: absolute; top: -1px; border-top: 1px solid #ccc; left: 100%; width: 100%; background: #fff; }
.menu-v-d ul ul { left: 100%; }
.menu-v-d li ul li { background: #fff; }

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

.menu-v-d li:hover ul,
.menu-v-d li:hover ul li:hover ul,
.menu-v-d li:hover ul li:hover ul li:hover ul { display: block; }
</code>

Первая часть кода, практически аналогичная рассмотренному выше вертикальному меню.

Строчки:

<code css>
.menu-v-d li ul { display: none; position: absolute; top: -1px; border-top: 1px solid #ccc; left: 100%; width: 100%; background: #fff; }
.menu-v-d ul ul { left: 100%; }
.menu-v-d li ul li { background: #fff; }
</code>

Отвечают за выпадающие подменю, оно будет смещено на ширину основного меню и иметь такую же ширину.

За выпадание и спрятанность меню отвечает следующий код-ёлочка:

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

.menu-v-d li:hover ul,
.menu-v-d li:hover ul li:hover ul,
.menu-v-d li:hover ul li:hover ul li:hover ul { display: block; }
</code>

Для использования достаточно прописать класс ''menu-v-d'':

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

----

Ссылки по теме:

  * [[http://www.cssplay.co.uk/menus/|Stu Nicholls | CSSplay | CSS only menus]]