CSS下拉菜单 支持FF、IE 6 7 8
作者：shenmeng 发布时间：November 14, 2009 分类：默认分类
用css做下拉菜单，要用到块的不可见属性。有两种方法，一种是利用visibility: hidden; 另一种是利用display:none;
其实两者原理基本相同，后者略简洁。在IE5 6 7 8，FF，OP上测试成功。下面演示一个例子，我的目标是用最精简的代码演示一个完整的例子。
先建一个嵌套列表，代码如下：
<div id="nav_test">
<ul>
<li><a href="">外层1</a></a>
<ul>
<li><a href="">内层1</a></li>
<li><a href="">内层2</a></li>
</ul>
</li>
<li><a href="">外层2</a></a>
<ul>
<li><a href="">内层3</a></li>
<li><a href="">内层4</a></li>
</ul>
</li>
</ul>
现在写CSS代码：
<style type="text/css">
#nav_test *{margin:0;padding: 0;}
#nav_test{
behavior: urlcsshover3.htc);
width:200px;
text-align: center;
font-size:17px;
}
#nav_test a{
display:block;
color:#FFFFFF;
background: #999999;
text-decoration: none;
}
#nav_test ul{
width: 100%;
list-style: none;
}
#nav_test li{
width: 50%;
float:left;
position:relative;
}
#nav_test li li{
clear: both;
width: 100%;
}
#nav_test li li a{
display:none;
}
#nav_test a:hover{
background: #333333;
}
#nav_test ul ul{
position: absolute;
top: 17px;
left:0px;
clear:both;
}
#nav_test li:hover li a{
display: block;
}
</style>
实际效果演示
由于IE6不支持li的hover伪类，所以添加一句behavior: url(csshover3.htc); 文件csshover3.htc （下载） 是一个为IE添加了几个伪类支持的脚本，为IE6+添加hover和active支持，为IE7，IE8添加focus支持。关于该文件的具体信息及下载请见http://www.xs4all.nl/~peterned/csshover.html
另外网上有一种对IE6不支持li:hover的hack，但是在IE8中却失效了，那种方法见探究纯粹的CSS下拉菜单
另外，IE7 IE8虽然支持li:hover ,但是必须申明DOCTYPE为strict ，我试验的结果是在本地需要申明DOCTYPE为strict ，但放在服务器端则不需申明。
仅有一条评论 »
如果想实现3级下拉 该怎么改呢?