您的位置：首页 > Web前端 > CSS

HTML/CSS实现下拉菜单

2016-05-07 21:04 441 查看

HTML部分：

<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">AjaxAjaxAjaxAjax</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">AjaxAjaxAjaxAjax</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>

CSS部分：

*{
margin:0;
padding:0;
}
#nav{
background-color: #ccc;
width: 600px;
height: 40px;
margin:0 auto;
}
ul li{
list-style: none;
float: left;
/*width:90px;*/
/*padding:0 10px;*/
line-height: 40px;
text-align: center;
position: relative;
}
a{
padding:0 10px;
text-decoration: none;
color: #000;
display: block;//块级元素
height:40px;
}
a:hover{
color: #fff;
background-color: #666;
}
ul li ul li{
float: none;
background-color: #eee;
margin-top:2px;
}
ul li ul{
position:absolute;
left: 0;
top:40px;
display: none;
}
ul li ul li a:hover{
background-color: #06F;
}
ul li:hover ul{
display: block;
}

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

标签：

相关文章推荐

新的分享

章节导航