您的位置：首页 > 其它

如何写一个简单的鼠标滑动过的二级菜单

2016-03-29 13:45 399 查看

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css" >
.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;
}
</style>
<body>
<p>下面是一个导航条</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航