HTML下拉式菜单⼜是摸鱼的⼀周（）
如题 简单明了
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 {html下拉菜单的制作方法
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进⾏缓慢过渡的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。