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;属性,当其绝对定位后,它将脱离原来文档流,不再占据
空间,因此也不会再把下边内容挤跑了
绝对定位和浮动的区别:当一个元素绝对定位后,它的位置依据浏览器左上角或相对于父容器(父容器使用相对定位),该元素脱离文档流不占据空间(普通文档流元素布局就当绝对定位元素不存在),因此可以覆盖页面上其他元素;浮动元素定位基于正常的文档流,从文档流中抽出尽可能远的移动左侧或者右侧,文字内容会围绕在浮动元素周围。一个元素浮动或绝对定位后,自动转换为块级元素。