纯css代码编写的下拉式菜单
这是一个纯css写的下拉菜单，其中有一个地方说明。我设置二级菜单和三级菜单时分别用了class：zh2 和 class：zh3 来区分二级菜单很三级菜单，因为不这样设置的话，在点击一级菜单时，二级和三级菜单会一起显示，而不是只显示二级菜单。因为我二级和三级菜单都用了visibility 属性，所以用class：zh2 和 class:zh3来区分显示二级菜单和三级菜单，这样点击一级菜单只显示二级菜单而不显示三级菜单。当然这段代码在 Google,Firefox,IE中显示都没问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css下来菜单</title>
<style type="text/css">
#zh1{
margin:0px;
padding:0px;
}
#zh1 li{
float:left;
list-style:none;
width:100px;
height:30px;
background:#999;
position:relative;/*必须设置，为下面的position：absolute；做准备*/
display:inline;
}
#zh1 li a{
text-decoration:none;
line-height:30px;
color:#FFF;
text-align:center;
display:block;
}
#zh1 li a:hover{
background:#0F3;
}
#zh1 ul.zh2{
position:absolute;
top:30px;
left:-40px;
visibility:hidden;
}
#zh1 li:hover ul.zh2{
visibility:visible;
}
#zh1 ul li a:hover{
background:#0C9;
}
#zh1 ul ul.zh3{
position:absolute;
top:0px;
left:60px;
visibility:hidden;
}
#zh1 ul li:hover ul.zh3{
visibility:visible;
}
#zh1 ul ul li a:hover{
background:#6FF;
}
</style>
</head>
<body>
<ul id="zh1">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<ul class="zh2">
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单三</a>
<ul class="zh2">
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a>
<ul class="zh3">
<li><a href="#">子子菜单一</a></li>
<li><a href="#">子子菜单二</a></li>
<li><a href="#">子子菜单三</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单四</a>
<ul class="zh2">
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单五</a>
<ul class="zh2">
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a>
<ul class="zh3">
<li><a href="#">子子菜单一</a></li>
<li><a href="#">子子菜单二</a></li>
<li><a href="#">子子菜单三</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号