<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用float制作兼容ie6纯css下来菜单</title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover { text-decoration:; color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
</style>
</head>
<body>
<dl class="nav">
<dd><a href="">首页</a></dd>
<dd>
<a href="">关于我们</a>
<ul>
<li><a href="">公司简介</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">企业荣誉</a></li>
<li><a href="">联系我们</a></li>
</ul>
</dd>
<dd>
<a href="">新闻动态</a>
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国外新闻</a></li>
</ul>
</dd>
<dd>
<a href="">产品展示</a>
<ul>
<li><a href="">手机数码</a></li>
<li><a href="">移动硬盘</a></li>
<li><a href="">显示器</a></li>
</ul>
</dd>
</dl>
</body>
</html>
dl.nav和ul 都浮动，利用 margin:-888px -150px 0 0;把子菜单ul隐藏起来；
当鼠标移动到.nav a 上的时候.nav a:hover利用margin-right:1px;把子菜单了挤下来。
nav dd a + 子菜单的宽度.nav dd li a = 父系元素的和 .nav dd
PS:刚做好的时候ie7下有bug，.nav dd ul 加了个宽度就行了。。
PS2:加了个宽度后，ie7下能显示子菜单了，但是无法点击选择。。。把.nav dd ul 的宽度设置为width:auto; 就可以了。。
ps3：把.nav dd ul 的overflow和宽度都去掉就正常了
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
