使用html+css实现简易的下拉菜单
html代码如下:
<ul class="menu">
<li> <a href="#">Home</a></li>
<li>
<a href="#"> Html5 </a>
<ul class="sub">
<li><a href="#"> Html5 </a></li>
<li><a href="#"> Html5 </a></li>
<li><a href="#"> Html5 </a></li>
</ul>
</li>
<li> <a href="#">News</a></li>
</ul>
css代码如下:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.menu {
width: 1000px;
height: 50px;
margin: 50px auto;
}
.menu li {
float: left;
width: 200px;
height: 40px;
margin-right: 10px;
background-color: pink;
line-height: 50px;
text-align: center;
}
.menu li a {
display: block;
width: 100%;
height: 100%;
color: #fff;
font-size: 20px;
}
.menu>li:nth-child(2) {
position: relative;
}
.sub {
position: absolute;
overflow: hidden;
top: 40px;
left: 0;
height: 0;
transition: 1s;
}
.menu>li:nth-child(2):hover .sub {
height: 200px;
}
</style>
效果图: