Класс .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; }
Поддерживается отступы вложеннх уровней с помощью строчки:
.menu-v li ul { padding-left: 1em; margin-top: 2px; }
Для создания меню, достаточно подключить его к списку:
<ul id="menu" class="menu-v">
Класс .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">Ссылки по теме: