Многоуровневое вертикальное меню - (CSS - JavaScript)

Навигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице. Выпадающее вертикальное меню корректно отображается в браузерах Firefox, Opera и Internet Explorer. Автор меню мне неизвестен, поэтому и ссылки на оригинал не имеется.

HTML - JavaScript

Скачать JavaScript
<ul id="navmenu-v">
<li><a href="index.html">Главная</a></li>
<li><a href="templates.html">Шаблоны, рецепты +</a>
<ul>
<li><a href="templates.html">Шаблоны, заготовки +</a>
<ul>
<li><a href="temp1.html">Шаблон 1</a></li>
<li><a href="temp2.html">Шаблон 2</a></li>
<li><a href="temp3.html">Шаблон 3</a></li>
<li><a href="temp4.html">Шаблон 4</a></li>
<li><a href="temp5.html">Шаблон 5</a></li>
<li><a href="temp6.html">Шаблон 6</a></li>
<li><a href="temp7.html">Шаблон 7</a></li>
<li><a href="temp8.html">Шаблон 8</a></li>
</ul>
</li>
<li><a href="faq.html">Рецепты HTML</a></li>
<li><a href="faq-css.html">Рецепты CSS</a></li>
</ul>
</li>
<li><a href="#">Менюшки +</a>
<ul>
<li><a href="#">Вертикальные +</a>
<ul>
<li><a href="menu1.html">Вертикальное меню 1</a></li>
<li><a href="menu2.html">Вертикальное меню 2</a></li>
<li><a href="menu3.html">Вертикальное меню 3</a></li>
<li><a href="menu4.html">Вертикальное меню 4</a></li>
<li><a href="menu5.html">Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href="#">Горизонтальные +</a>
<ul>
<li><a href="menu6.html">Горизонтальное меню 1</a></li>
<li><a href="menu7.html">Горизонтальное меню 2</a></li>
<li><a href="menu8.html">Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/gb">Гостевая книга</a></li>
<li><a href="submit.html">Контакт</a></li>
</ul>

CSS

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

Вернуться