Question

HTML代码

.navbar li {
  color: #B7B7B7;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  min-width: 70px;
  padding: 22px 16px 18px;
}
.navbar #menumain ul {
  width: 120%;
}
.navbar ul ul {
  display: none;
}

<div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <a href="/">
        <li>Menu2</li>
      </a>
    </ul>
  </li>
</div>

如何使用 navbar ul ul 将:hover中的显示：无更改为显示：阻止 如何使用 navbar ul ul 将:hover中的显示：无更改为显示：阻止？

Answer 1

我猜你要求的是这样的：

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

但你的代码不清楚。您目前在选择器中有.navbar ul ul，但在标记中的任何位置都没有两个嵌套ul。

Answer 2

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

我猜你的意思是这个

编辑：@David Hedlund你更快

Answer 3

您可以尝试使用 div 类撰写.navbar li:hover ul { display: block; }。

ul

根据您的HTML代码，您没有2 li而是1 ul和1 ul。理想情况下，首先应该是li，然后是HTML代码中的public Language() { // Set default values or leave empty }。

Answer 4

你做错了男人。 a＆gt; li是一种不好的做法。你需要做li＆gt; a

＆＃13;

.navbar > li > ul { display: none; }
.navbar > li:hover > ul { display: block; }

＆＃13;

<div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <li><a href="/">item1</a></li>
      <li><a href="/">item2</a></li>
    </ul>
  </li>
</div>

＆＃13;

记住HTML W3C Validator 错误：在此上下文中，元素a不允许作为元素ul的子元素。（抑制此子树中的更多错误。）

如何使用'：hover'更改CSS

4 个答案: