CSS 和 HTML 导航栏菜单项

Question

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

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，这是错误的位置。我应该直接在阻止之后。

如果可以避免，请不要使用它。

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>