如何解决当光标触摸主侧菜单时,子菜单应该可见
我尝试创建带有子菜单的侧边菜单栏。当光标触摸主侧菜单时,子菜单应该可见。我使用了 display: none;
,悬停时我使用了 display: block;
。 display: none;
不适用于子菜单。
我也试过 visibility: hidden;
但它也不起作用。我的代码有什么问题?
.side-menu {
height: 89%;
width: 15%;
font-size: 18px;
font-family: Arial;
float: left;
z-index: 2;
}
.side-menu ul {
margin-left: 10px;
}
.side-menu ul li {
list-style-type: none;
font-weight: bold;
margin-top: 10px;
cursor: pointer;
}
.side-menu ul li:hover {
color: green;
}
.side-menu ul li ul {
display: none !important;
}
#side-menu ul li:hover ul {
display: block;
}
<html>
<head>
<title>Green Box</title>
</head>
<body>
<section class="header">
<div class="side-menu" id="side-menu">
<ul>
<li> Home</li><br>
<li>Offers<i class="fa fa-angle-right"></i></li>
<ul>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
<li>mega sale<i class="fa fa-angle-right"></i></li><br>
<li> great indian sale<i class="fa fa-angle-right"></i></li><br>
<li> glass</li><br>
<li>frames</li><br>
<li> gift</li><br>
</ul>
</div>
</section>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。