This popmenu is adapted based on the articles of alistapart , which is easier than the display and hide layers method in DW. Ie6.0 ie5.x Firefox NS can be correctly displayed. Only a few JavaScript codes are used, during use, you only need to insert the
part into the desired location, without any dislocation due to different resolutions. Menu demonstration >>
CSS Code
Li ul {display: none; left:-40px; position: absolute; top: 24px; width: 490px;/* This width is required by opera, adjust the actual width of the navigation bar */} li ul Li {display: inline;} li ul Li a {Background: url(h_line.gif) No-repeat 0px 7px; color: #666666; font-weight: normal; padding: 6px; text-align: Left;} li ul Li A: hover {Background: url(h_line.gif) No-repeat 0px 7px; color: # dc4e1b; text-Decoration: underline;} li ul, Li ul Li {border: 0px;} li: hover ul, Li. over ul, UL Li: hover {display: block;} ul {list-style: none; margin: 0px; padding: 0px; Font: normal 11px verdana ;} ul Li {border: solid 1px # cccccc; border-left: 0px; float: Left; position: relative;} ul Li a {Background: # f5f5f5; color: #666666; display: block; font-weight: bold; padding: 5px 10px; text-align: center; text-Decoration: none;} ul Li A: hover {Background: # dc4e1b; color: # ffffff ;}. left {Height: 24px; width: 1px ;}
<Ul id = "nav"> <li class = "Left"> </LI> <li> <a href = "#"> Home </a> </LI> <li> <a href = "#"> about </a> <ul> <li> <a href = "#"> sub menu 21 </a> </Li> <li> <a href = "#"> sub menu 22 </a> </LI> <li> <a href = "#"> sub menu 23 </> </LI> <li> <a href = "#"> sub menu 24 </a> </LI> </ul> </LI> <li>
JS Code
startlist = function () {
If (document. all & document. getelementbyid) {
navroot = document. getelementbyid ("nav");
for (I = 0; I node = navroot. childnodes [I];
If (node. nodename = "Li") {
node. onmouseover = function () {
This. classname + = "over";
}< br> node. onmouseout = function () {
This. classname = This. classname. replace ("over", "");
}< BR >}< br> window. onload = startlist;