下拉菜单
下拉菜单距离顶部有一定的距离,为了避免鼠标滑到二级菜单的过程中,二级菜单意外收起。可以在二级菜单的外部在包裹一层div,然后二级菜单距离外部包裹的div有一定的距离即可。
.right {
display: flex;
align-items: center;
i {
margin: 0 12px;
font-style: normal;
}
.tj,
.fbsj {
position: relative;
span {
color: #333;
font-size: 16px;
cursor: pointer;
}
&:hover .submenu{
display: block;
}
// 二级菜单包裹层
.submenu{
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 99;
}
ul {
width: 92px;
background-color: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
margin-top: 10px; //距离父div高度
li{
text-align: center;
height: 36px;
line-height: 36px;
font-size: #999;
cursor: pointer;
&:hover{
background-color: #f1f1f1;
color: #333;
}
}
}
}
}