下文是纯css实现的，鼠标滑过自动显示子栏目下拉菜单的效果实例。
<!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=utf-8" />
<title>genban.org</title>
<style type="text/css" >
body{
margin:0px;
padding:0px;
}
li{
list-style:url(1.jpg);
}
a{
display:block;
}
a:link,a:visited {
text-decoration: none;
color:#000000;
}
.menu{
margin:0px auto;
width:404px;
height:21px;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
position:relative;
float:left;
list-style:none;
padding:2px;
border:1px dotted;
font-size:14px;
width:95px;
text-align: center;
margin:0px;
background:#999999;
}
.menu ul li ul{
display:none;
}
.menu ul li:hover ul{
display:block;
position: absolute; left: 0px; top: 21px;
}
.menu a:link{
background:url(2.png) -137px -10px;
}
.menu a:hover{
background:url(2.png) -26px -10px;
}
</style>
</head>
<body>
<p>genban.org导航</p>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a>
<ul>
<li><a href="1#">新手入门</a></li>
<li><a href="2#">视频教程</a></li>
<li><a href="3#">常见问题</a></li>
</ul>
</li>
<li><a href="#">学习课程</a>
<ul>
<li><a href="1#">新手入门</a></li>
<li><a href="2#">视频教程</a></li>
<li><a href="3#">常见问题</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
鼠标滑过显示的关键css，其实就是
.menu ul li:hover ul{
display:block;
position: absolute; left: 0px; top: 21px;
}
通过li:hover状态，来更改display，从none改为block，从而达到显示的目的。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！