Level 3 popmenu in the horizontal and vertical directions-pop-up menu (div + CSS + JS)

In fact, this menu should be called level-2, but many friends are used to calling it level-3. Let it go! Correctly displayed in ie6.0 ie5.x firefox1.x ns7.2 opera8.0, with only a few JSCode, You only need to insert the <ul> </ul> part into the desired location. Horizontal menu> vertical menu>

Code in the horizontal direction:

CSS code
# Nav, # nav ul {float: Left; List-style: none; line-Height: 22px; Background: # f9f9f9; /* -- set the menu background color -- */font-weight: bold; padding: 0px; margin: 0px; Border: solid 1px # cccccc; border-Right: 0px ;} # nav ul {border: solid 1px # cccccc; border-top: 0px; border-Right: 0px ;}# nav A {display: block; width: 85px; /* -- Main Menu width -- */color: #333333; text-Decoration: none; text-align: center; border-Right: solid 1px # cccccc;} # nav: hover {color: #336666 ;}# nav. selected {Background: URL (.. /img/arrow.gif) No-repeat right 50%;} # nav Li {float: Left; width: 85px;/* -- Main Menu width -- */} # nav Li ul {position: absolute; left:-999em; width: 150px; font-weight: normal; margin: 0px; padding: 0px;} # nav Li {width: 150px; /* -- Sub-menu width -- */} # nav Li ul a {width: 150px;/* -- Sub-menu width for ie5.x -- */W \ idth: 126px; /* -- Sub-menu width for ie6.0 ff ns opera -- */padding: 0px 12px; line-Height: 19px; border-top: solid 1px # cccccc; text-align: left ;}# nav Li ul {margin:-20px 0 0 149px;/* -- level 3rd menu position -- */} # nav Li: hover ul, # nav Li. sfhover ul {left:-999em;} # nav Li: hover ul, # nav Li: hover ul, # nav Li. sfhover ul, # nav Li. sfhover ul {left: auto;} # nav Li: hover, # nav Li. sfhover {Background: # f5e3c0;/* -- menu hover background color --*/}

<Ul id = "nav"> <li> <a href = "#"> Home </a> </LI> <li> <a href = "#"> about US </a> </LI> <li> <a href = "#"> Products </a> <ul> <li> <a href = "#"> sub menu 31 </a> </LI> <li> <a class = "selected" href = "#"> sub menu 32 </a> <ul> <li> <a href = "#"> sub menu 321 </a> </LI> <li> <a href = "#"> sub menu 322 </a> </LI> <li> <a href = "#"> sub menu 323 </a> </LI> <li> <a href = "#"> sub menu 324 </a> </LI> </ul> </LI> <li> <a href = "#"> sub menu 33 </a> </LI> <li> <a href = "#"> sub menu 34 </a> </LI> </ul> </LI> <li> <a href = "#"> services </a> </LI> <li> <a href = "#"> Contact Us </a> </LI> </ul>
 

JS Code from: htmldog 

sfhover = function () {
var sfels = document. getelementbyid ("nav "). getelementsbytagname ("Li");
for (VAR I = 0; I sfels [I]. onmouseover = function () {
This. classname + = "sfhover";
}< br> sfels [I]. onmouseout = function () {
This. classname = This. classname. replace (New Regexp ("sfhover \ B"), "");
}< BR >}< br> If (window. attachevent) window. attachevent ("onLoad", sfhover);