第八天 下拉及多级弹出菜单

4、;}现在预览看下，二级菜单是不是已经归位了，但鼠标划过时还继承了一级菜单的样式，所以也改为最终效果上的黑色背景白色文字，还有下拉菜单的灰色边框和灰色背景也一并加上，修改并增加如下代码：#menuulliul{border:1pxsolid#ccc;}#menuulliulli{float:none;width:85px;background:#eee;margin:0;}#menuulliullia{background:none;}#menuulliullia:hover{background:#33

5、3;color:#fff;}第一行设置二级菜单的灰色边框；为了美观，我们把下拉菜单的宽度设置成和一级菜单宽度相同，第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px，和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px；最后一行设置鼠标划过时的样式。再预览一下，是不是基本的样式已实现了。下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：#menuulliul{display:none;border:1pxsolid#cc

6、c;}#menuulli:hoverul{display:block;}注意第二行的写法，#menuulli:hoverul这个样比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式（有点饶舌），这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示，这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为

7、display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以增加如下代码：#menuulli.sfhoverul{display:block;} 认真跟着教程制作的朋友可能已经发现，现在应用的JS和纵向导航时应用的不样，但最终实现的效果是一样的。同理css在布局网站时，也是可以多种方法的，正所谓条条大道通罗马，希望大家举一反三，加深前面教程的掌握。JS部分本例不做讲解，如果你想弄清楚JS是如何实现的，请学习js

8、相关内容。到这里，本例就基本完成了，还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menuulliul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了