cssdiv下拉菜单(js)

3、p才是用于控制菜单。2、样式继承：由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。A、第一层样式定义：body{margin:0px;padding:0px;font-size:12px;}#nav{……/*略*/width:800px;margin:0auto;}#navul{……}#navulli{float:left;}#navullia{……}#navullia:hover{……}B、父层LI的相对

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

5、不清除浮动继承时，下拉菜单就变成横向出向，如果你需要这种下拉效果，就不清除吧，如下图：#navulli{position:relative;}#navulliul{display:none;margin:0;padding:0;position:absolute;left:3px;top:24px;background-color:#FC9;width:99px;border-bottom:1pxsolid#FC0;}#navulliulli{width:99px;float:none;border:0px1px;}C、光标移上去的状态定义：

6、定义完上面后，接着对下拉菜单在光标移到上层LI时的状态控制：#navulliullia,#navulliullia:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1pxsolid#FC0;padding-left:5px;color:#000}#navulli:hoverul,#navli.overul{display:block;}这两行中，第一行#navulliullia,#navulliullia:hover{…}作用是更改整个菜单第一

7、层的LI对下拉部分影响，避免由于继承影响样式。第二行是用于当光标移上去后，下拉菜单出现。大家可能注意到其中的.over类，我们并没有在结构代码中设置，这是为了控制等下JS生成的类。在#navulli:hoverul中，FF下已经能够生效，不需要JS，但IE6下不行，需要通过后半句#navli.overul配合JS来生效。D、javascript代码：varshowNavList=function(){if(document.all&&document.getElementById){

8、varnavRoot=document.getElementById(“nav_top”);//注意不能用nav。for(i=0;i