时间戳

首页 > 解决方案 > 当光标触摸主侧菜单时，子菜单应该可见

html - 当光标触摸主侧菜单时，子菜单应该可见

问题描述

我试图创建一个带有子菜单的侧边菜单栏。当光标触摸主侧菜单时，子菜单应该可见。我用过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>

标签： htmlcsssubmenu

解决方案

这是错误的。'<li>' 中没有 '<ul>' 元素。同时删除重要的.

.side-menu ul li ul {
  display: none !important;
}

当鼠标悬停在菜单上时，您还没有包含要显示的部分。我在子菜单中添加了一个类名以使其显示。所以最终的代码是

.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 ul {
  display: none;
}

#side-menu ul li:hover + .subs {
  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 class="subs">
          <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>

推荐阅读