CSS 和 HTML 导航栏菜单项答案

【问题标题】：CSS and HTML nav bar menu itemCSS 和 HTML 导航栏菜单项
【发布时间】：2017-08-18 15:46:07
【问题描述】：

我在让菜单项重新出现在 CSS 和 html 中时遇到问题。下面的前两行 CSS 代码“不显示”隐藏了我想要的菜单项。但是，当鼠标悬停在菜单上时，第二个代码不会使菜单项再次出现。对此的任何帮助将不胜感激。

      ul li ul li ul li{
     display:none;
       }
     ul li ul li:hover {
     background: #696630;
     display:block; !important;
     }

【问题讨论】：

请附上我们可以试用的html代码和sn-p
首先，您并没有定义要在悬停时显示的元素。代码会很有帮助。
HTML 对于上下文总是很方便，请提供minimal reproducible example

标签： html css

【解决方案1】：

您想要重新出现的项目是 LI 嵌套的更下方，因此请确保将鼠标悬停在父级上，但您实际设置样式的元素是正确的子级。

ul li ul li ul li {
 display: none;
}

ul li ul li:hover ul li {
 display: block;
}

【讨论】：

【解决方案2】：

请看下面的例子。在您的代码中，您在分号后面有 !important，这是错误的位置。我应该直接在block之后。

在可以避免的情况下不要使用它。

ul {
  padding: 0;
  margin: 0;
}

li {
  padding: .5em;
  cursor: pointer;
  position: relative;
  width: 100px;
}

li:hover {
  background: #696630;
}

.sub,
.subsub {
  display: none;
  position: absolute;
  top: 1.5em;
  left: 0;
}

.main li:hover ul.sub {
  display: inline-block;
}

.sub li:hover ul.subsub {
  display: inline-block;
}

<ul class="main">
  <li>Main
    <ul class="sub">
      <li>Sub
        <ul class="subsub">
          <li>sub sub</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：