效果:
代码:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
li{
/*取消li的点*/
list-style: none;
height: 28px;
}
#menu{
display: inline-block;
width: 100%
}
.plat {
max-height: 0;
/*渐变效果*/
transition: max-height 0.25s ease-out;
overflow: hidden;
background: #b6b1b1;
border-radius: 4px;
width: 80px;
margin: 0;
padding: 0;
text-align: center;
}
/*鼠标选中属性*/
.nav:hover .plat {
max-height: 200px;
transition: max-height 0.25s ease-in;
width: 80px;
margin: 0;
padding: 0;
}
/*鼠标选中属性*/
li:hover {
border-radius: 4px;
background: #E33E33;
color: #fff;
}
.nav{
height: 32px;
width: 80px;
margin-top: 6px;
margin-right: 6px;
border-radius: 4px;
color: #fff;
padding-left: 0;
padding-right: 0;
line-height: 32px;
background: #E33E33;
text-align: center;
display: inline;
float: left;
}
</style>
</head>
<body>
<div id="menu">
<ul class="nav">
更多信息
<ul class="plat">
<li onclick="alert('aaaa')">个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
</ul>
</ul>
<ul class="nav">
更多信息
<ul class="plat">
<li onclick="alert('aaaa')">个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
</ul>
</ul>
<ul class="nav">
更多信息
<ul class="plat">
<li onclick="alert('aaaa')">个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
<li>个人中心</li>
</ul>
</ul>
</div>
</body>
</html>
本文为编程小白自学问题归纳,如有错误与不足敬请指正!