CSS+DIV下拉菜单（第2页）

B、父层LI的相对定位：
接着最关键就是定义：#nav ul li {position:relative;}把第一层 的LI定义成相对定位后，下拉菜单的绝对定位就不会偏移，而以其上层的LI做为参照，此外，需要对下拉菜单的列表做2项工作：
第一项：设置下拉列表的UL不显示：#nav ul li ul 设为display:none。以及绝对定位position:absolute; left:3px; top:24px;。
第二项：对下拉列表的LI浮动进行清除#nav ul li ul li 设为float:none；如果不清除也可以，但下拉列表的UL要设置宽度width:99px;，当不设置此宽度也不清除浮动继承时，下拉菜单就变成横向出向， 如果你需要这种下拉效果，就不清除吧，如下图：

#nav ul li {position:relative;}
#nav ul li ul {display:none;margin:0;padding:0; position:absolute; left:3px; top:24px; background-color:#FC9;width:99px;border-bottom:1px solid #FC0;}
#nav ul li ul li {width:99px;float:none;border:0px 1px;}
C、光标移上去的状态定义：
定义完上面后，接着对下拉菜单在光标移到上层LI时的状态控制：
#nav ul li ul li a,#nav ul li ul li a:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over ul{display:block;}
这两行中，第一行#nav ul li ul li a,#nav ul li ul li a:hover {…} 作 用是更改整个菜单第一层的LI对下拉部分影响，避免由于继承影响样式。
第二行是用于当光标移上去后，下拉菜单出现。大家可能注意到其中的.over类，我们并没有在结构代码中设置，这是为了控制等下JS生成的类。在#nav ul li:hover ul中，FF下 已经能够生效，不需要JS，但IE6下不行，需要通过后半句#nav li.over ul配合JS来生效。
D、javascript代码：
<script type=”text/javascript”>
var showNavList = function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById(“nav_top”); //注意不能用nav。
for(i=0;i<navRoot.childNodes.length;i++){
var node = navRoot.childNodes[i];
if(node.nodeName==’LI‘){
node.onmouseover=function(){this.className+=’ over’;} //注意over前面 有一个空格。
node.onmouseout =function(){this.className = this.className.replace(‘ over’,”);}
}
}
}
}
window.onload = showNavList;
</script>