可悬停下拉菜单
使用html和css完成下拉菜单的搭建
功能展示
实例解析
可悬停下拉菜单主要由三部分组成:按钮,菜单、包裹两者的盒子(div)
按钮:用于显示触发的位置
菜单:就是菜单
包裹两者的盒子(div):用于实现鼠标停在按钮上就出现菜单
html
<div class="home">
<div class="btn"></div>
<div class="menu"></div>
</div>
css
.btn{
width: 75px;
height: 75px;
background-color:red;
}
.menu{
/*display:none先不显示*/
display:none;
width: 200px;
height: 300px;
background-color:green;
}
.home{
width: 75px;
height: 75px;
}
/*鼠标落在包裹两者的盒子时 更改display让其显示*/
.home:hover .menu{
display:block;
}