**
制作精美下拉框
**
实现的效果,点击某一个元素,下拉框展开,如果鼠标不移入,会根据你设定的时间收起,鼠标移入,下拉框不会收起,鼠标移开会根据你设定的时间收起
先上源码
CSS
body{
background: #ccc;
}
* {
padding: 0;
margin: 0;
}
div {
width: 80px;
transition: all .2s;
height: 0px;
overflow: hidden;
background: antiquewhite;
margin: 20Px 20px;
border-radius: 5px;
}
li {
list-style: none;
line-height: 40px;
text-align: center;
background: #fff;
transition: all .5s;
}
li:hover {
background-color: rgb(240, 235, 235);
}
button{
position: absolute;
top: 0px;
left: 0px;
margin-left: 50px;
padding: 5px 10px;
}
HTML
<div id="share" steta="false">
<ul>
<li>关于</li>
<li>分享</li>
<li>转到</li>
<li>友链</li&