Question

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

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

Answer 1

您想要重新出现的项目是LI进一步向下嵌套，因此请确保悬停在父级上，但实际样式化的元素是正确的子级。

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

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

Answer 2

请参阅下面的示例。在您的代码中，您在分号后面有!important，这是错误的地方。我应该直接在封锁之后。

当可以避免时，不要使用它。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS和HTML导航栏菜单项

2 个答案: