В данном выпадающем вертикальном меню, подменю открываются при наведении мыши на основной пункт меню. Есть такое же меню, но у него подпункты открываются при клике по основному пункту меню.
1. CSS
#menu_body li ul {
display: none;
}
#menu_body li:hover ul, #menu_body li.over ul {
display: block;
}
#menu_body {
background:#171717;
width: 200px;
}
#menu_body a {
display: block;
width: 185px;
height: 24px;
padding-left: 15px;
}
#menu_body ul li {
list-style-type: none;
border-bottom: 1px solid #fff;
margin-left: -40px;
padding-left: 0px;
}
#menu_body ul li a {
color: #fff;
text-decoration: none;
font-size: 115%;
font-family: Georgia;
}
#menu_body ul li a:hover {
color: #fff;
text-decoration: none;
background:#424242;
}
#menu_body ul li ul li {
border: 0;
list-style-type: none;
color: #fff;
list-style-position: inside;
background:#7F7F7F;
}
#menu_body ul li ul{
border-top: 1px solid #fff;
margin-left: -10px;
padding-left: 50px;
}
2. JavaScript
Данный код вставляем перед закрывающим тегом
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("ul1");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over","");
}
}
}
}
}
window.onload=startList;
</script>
3. HTML
<div id="menu_body">
<ul id="ul1">
<li><a href="#">Пункт №1</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
</ul>
</li>
<li><a href="#">Пункт №2</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
</ul>
</li>
<li><a href="#">Пункт №3</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
</ul>
</li>
</ul>
</div>
Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.