此POPMENU根据alistapart的articles改编,比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox NS都能正确显示,只用到很少的JS代码,使用时只要把<ul></ul>部分插入需要的地方即可,不会因分辨率不同而发生错位的现象。菜单演示>>
CSS代码
li ul { display: none; left: -40px; position: absolute; top: 24px; width: 490px; /*opera需要这个宽度, 可根据导航条的实际宽度作调整*/ } 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</a></li><li><a href="#">Sub menu 24</a></li> </ul> </li> <li><a href="#">Products</a><ul><li><a href="#">Sub menu 31 </a></li> <li><a href="#">Sub menu 32</a></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><a href="#">Contact Us </a></li></ul>
js代码
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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;