一、设置display: none; hover的时候display: block;
例如：
<style>
.test{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<ol>
<li>
<a href="#">TestTestTestTestTestTestTest</a>
<div class="test">这是一个测试</div>
</li>
<li>
<a href="#">TestTestTestTestTestTestTest</a>
</li>
</ol>
</body>
如果要让div实现下拉效果可以设置元素隐藏，在hover <li> 标签的时候显示div即可
.test{
width: 50px;
height: 50px;
display: none;
}
li:hover>.test{
display: block;
}
hover的时候即可显示下拉。
二、使用transition属性
使用transition属性可以给元素设置高度为0，元素内容溢出部分裁剪。
hover的时候恢复高度即可。
.test{
width: 50px;
height: 0px;
overflow: hidden;
transition: 2s;
}
li:hover>.test{
height: 50px;
}
注意： transition: 2s; 2s指的是2秒，可以单位毫秒。
此方法可以实现下拉菜单的动画效果，另外不止是高度可以过渡，颜色，宽度都可以。
例如：
扫一扫
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
