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

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

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

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

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

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

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

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

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

Строчки:

.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; }

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

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

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