<!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>
垂直下拉菜单:
水平下拉菜单: