简单的css动画下拉菜单

#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;} #box:hover{height:250px;} #box ul{list-style:none; margin:0; padding:0;}

随心吗

416人浏览 · 2017-04-20 15:18:08

随心吗 · 2017-04-20 15:18:08 发布

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
#box:hover{height:250px;}
#box ul{list-style:none; margin:0; padding:0;}
#box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px green solid; background:#46A546; color:white;}
</style>
<body>
<div id="box">
<ul>
<li>A</li>
<li>AA</li>
<li>AB</li>
<li>AC</li>
<li>AD</li>
</ul>
</div>
</body>
</html>