CSSdiv下拉菜单(js).doc

CSS+div:下拉菜单详解之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。先把关键点和思路摘录一下：1、结构布局：在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下首页CSS专栏CSS基础CSS常用代码CSS高级技术 在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生 下拉菜单跑位。而这样嵌套后，一会通过定位，就不会偏移。在实际应用时，nav可以加入LOGO等内容，而nav_top才是用于控制菜单。2、样式继承：由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不 管这个，最后再去修正下拉部分的UL和LI。A、第一层样式定义：body margin: 0px;padding: 0px;font-size:12px;#nav /* 略 */width:800px;margin:0 auto;#nav ul #nav ul li float: left;#nav ul li a #nav ul li a:hover 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:hoverbackground:#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 uldisplay: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代码：var showNavList = function()if(document.all&document.getElementById)var navRoot = document.getElementById(“nav_top”); /注意不能用nav。for(i=0;inavRoot.childNodes.length;i+)var node = navRoot.childNodesi;if(node.nodeName=LI)node.onmouseover=function()this.className+= over; /注意over前面 有一个空格。node.onmouseout =function()this.className = this.className.replace( over,”);window.onload = showNavList;这样，我们整个下拉菜单就完成了，效果参下面图例，完整代码附到后面，实际应用中，对下拉样式再做美化即可。CSS测试var showNavList = function()if(document.all&document.getElementById)var navRoot = document.getElementById(nav_top);for(i=0;inavRoot.childNodes.length;i+)var node = navRoot.childNodesi;if(node.nodeName=LI)node.onmouseover=function()this.className+= over;node.onmouseout =function()this.className =