div+css 下拉多级弹出菜单

1）二级菜单代码

<divid="menu">

<ul>

<li><aid="current" href="#">首页</a></li>

<li><ahref="#">网页版式</a>

<ul>

<li><ahref="#">自适应宽度</a></li>

<li><ahref="#">固定宽度</a></li>

</ul>

</li>

<li><ahref="#">web 教程</a>

<ul>

<li><ahref="#">新手入门</a></li>

<li><ahref="#">视频教程</a></li>

<li><ahref="#">常见问题</a></li>

</ul>

</li>

<li><ahref="#">web 实例</a></li>

<li><ahref="#">常用代码</a></li>

</ul>

</div>

2）先把二级菜单的背景和浮动清除掉，增加以下css代码：

#menu ul li ul li { float:none;}

#menu ul li ul li a {background:none;}

 

#menu ul li ul { border:1pxsolid #ccc;}

#menu ul li ul li {float:none; width:85px; background:#eee; margin:0;}

#menu ul li ul li a {background:none;}

#menu ul li ul li a:hover {background:#333; color:#fff;}

 

下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：

#menu ul li ul { display:none;border:1px solid #ccc;}

#menu ul li:hover ul {display:block;}

，#menu ul li:hover ul这个样比较难理解，它的意思是定义当鼠

标划过#menu下ul 下li 时，li下的ul 的样式（有点饶舌），这里设置为display:block，

意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示， 这就实现了我们想要的效

果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需

要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为

display:block;然后当鼠标划过后，用JS给当前li 添加上这个样式上，根据css的优先级：

指定的高于继承的原则，就实现了IE6下的正确显示。所以增加如下代码：

#menu ul li.sfhover ul {display:block;}

    如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menuulli ul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据

空间，因此也不会再把下边内容挤跑了

    绝对定位和浮动的区别：当一个元素绝对定位后，它的位置依据浏览器左上角或相对于父容器（父容器使用相对定位），该元素脱离文档流不占据空间（普通文档流元素布局就当绝对定位元素不存在），因此可以覆盖页面上其他元素；浮动元素定位基于正常的文档流，从文档流中抽出尽可能远的移动左侧或者右侧，文字内容会围绕在浮动元素周围。一个元素浮动或绝对定位后，自动转换为块级元素。