又是摸鱼的一周()
如题 简单明了
html部分:
<div class="topclick">
<div class="ltbox1">
<p>啊哈哈哈</p>
</div>
<ul class="ltbox2">
<li class="li1">鸡汤来咯</li>
<li>这菜都上齐了</li>
<li>怎么都不吃啊</li>
</ul>
</div>
css部分:
.topclick {
height: 50px;
width: 100px;
position:relative;
display:inline-block;
}
.ltbox1 {
width: 100px;
height: 50px;
background-color: chartreuse;
text-align: center;
line-height: 50px;
cursor: pointer; /*鼠标指针经过*/
}
.ltbox2{
width: 100px;
height: 150px;
margin-top: 2px;
border-radius: 10px;
background-color: white;
position:absolute;
display: none; /*使下拉菜单栏消失*/
}
.li1{
margin-top: 10px;
}
.ltbox2 li{
height: 40px;
width: 100px;
text-align: center;
line-height: 40px;
display: block; /*使下拉菜单栏显示*/
}
.ltbox2 li:hover{
background-color:#E8E8E8;
}
.topclick:hover .ltbox2{
display: block;
}
效果图:
注意:使用display:none是不能用transition进行缓慢过渡的。