微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当光标触摸主侧菜单时,子菜单应该可见

如何解决当光标触摸主侧菜单时,子菜单应该可见

我尝试创建带有子菜单的侧边菜单栏。当光标触摸主侧菜单时,子菜单应该可见。我使用了 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 举报,一经查实,本站将立刻删除。