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

纯css 实现下拉菜单

2016-01-26 17:20 218 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#nav{
background-color:#eee;
width:600px ;
height:40px ;
}
ul{
list-style : none;
}
ul li{
float:left;
padding:0;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
display:block;
color:#000;
padding:0 10px;
}
a:hover{
color:#ff0000;
background-color:#666;
}
ul li ul li{
float:none;/*消除浮动 以垂直显示*/
background-color:#eee;
margin-top:2px;
text-align:center;
}
ul li ul li a{
width:100px;
padding:0px;
overflow:hidden ;
}
ul li ul{
position:absolute;/*看有分类有没有relative的 ， 绝对定位以浏览器为基准*/
left:0px;
top:40px;
display:none;
}
ul li:hover ul{
display:block;
}

#center{
background-color:#0e0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li>
<a href="">课程</a>
<ul>
<li><a href="">js</a></li>
<li><a href="">1</a></li>
<li><a href="">css</a></li>
</ul>
</li>
<li><a href="">学习中心</a>
<ul>
<li><a href="">acmmm</a></li>
<li><a href="">java</a></li>
<li><a href="">c++</a></li>
</ul>
</li>
<li><a href="">其他</a></li>
</ul>
</div>
<div id="center">
</div>

</body>
</html>

主要利用了relative absolute定位来控制菜单头和菜单子项的位置

菜单头水平显示采用 float 来实现，而这会影响子菜单又需要清楚浮动以垂直显示

菜单子项的隐藏显示则通过hover来设置 display属性(none block)来实现

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

标签：

相关文章推荐

新的分享

章节导航