标签套
标签，然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏，再等鼠标移动到上一个
标签时，将被套的
标签显示（样式：overflow:hidden
）。
贴一段网上摘的纯CSS下拉菜单（二级）
利用float制作兼容ie6纯css下来菜单
*
{
margin:0
padding:0
}
ul
{
list-style:none
}
a:hover
{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
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
你这代码写的比较乱啊 我帮你改了一下
这个导航适用于 IE7/8 firefox Safari Opera
唯一不适用于IE6，用纯css写导航必须有2套代码。
IE6不识别a之外的伪类。
或者用<!--[if IE 6]><!--[end if ]>嵌套一个table写法。
<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3/TR/x1/DTD/x1-strict.dtd">
<xmlns="w3/1999/x">
<head>
<meta -equiv="Content-Type" content="text/charset=utf-8" />
<title>52css</title>
<style type=text/css>
ul, li {
list-style-type:none
padding:0
margin:0
}
#bar {
width:1000px
height:30px
border:2px solid black
}
#bar ul li {
float:left
padding:0 15px
border:1px solid red
height:25px
margin-left:13px
margin-top:3px
position:relative
}
#bar ul ul {
display:none
width:200px
position:absolute
top:26px
left:-15px
}
#bar ul li:hover ul {
display:block
}
</style>
</head>
<body>
<div id="bar">
<ul>
<li><a href="#">222222</a>
<ul>
<li class="displayli">33333333333333</li>
<li class="displayli">33333333333333</li>
<li class="displayli">33333333333333</li>
<li class="displayli">33333333333333</li>
<li class="displayli">33333333333333</li>
<li class="displayli">33333333333333</li>
</ul>
</li>
<li><a href="#">222222</a></li>
<li><a href="#">222222</a></li>
<li><a href="#">222222</a></li>
<li><a href="#">222222</a></li>
</ul>
</div>
</body>
</>
