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

CSS实现垂直和s水平下拉菜单

2017-01-10 14:27 423 查看

<!DOCTYPE html />
<html>
<head>
<title>垂直下拉菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
.ul1{
text-decoration: none;
list-style: none;
float: left;
margin: 30px 50px;
}
.ul1 li{
width: 50px;
position: relative;
padding-bottom: 10px;
border: 1px solid #adf;
/* float: left; */ /* 加上这个float时就是水平下拉菜单 */
}
.ul1 li a{
text-decoration: none;
color: #8bf;
}
.ul1 li ul{
display: none;
background-color: lightyellow;
color: #bfe;
border: 1px solid #3ab;
position: absolute;
left: 0px;
top: 100%;
z-index: 10;
}
.ul1 li ul li{
position: relative;
list-style-type: none;
}
.ul1 li:hover ul{
display: block;
}
</style>
</head>
<body>
<div>
<nav>
<ul class="ul1">
<li><a href="#">下拉1</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="#">下拉2</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="#">下拉3</a>
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>

垂直下拉菜单：

水平下拉菜单：

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

标签： css 下拉菜单

相关文章推荐

新的分享

章节导航