html - 为什么将鼠标悬停在超链接上时不显示二级嵌套列表项？

Question

我希望法语下的“新闻”在:将鼠标悬停在法语上时显示。

ul#topmenu li a#HyperLink:hover ul {
  background-color: pink;
  display: list-item;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

当悬停在“法语”上时，您不能使用 JQuery 或 JS 来显示“新闻”。您需要使用 ID。您可以添加新的 ID 或类名。如何解决这个问题？

Answer 1

这对你有用:

只需将选择更改为 ul#topmenu li a#HyperLink:hover+ul 和 display: list-item !important; 即可正常工作。

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>

if you are trying to get the :hover over the "News" you can also use the following:

通过添加

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

在显示“新闻” 之后，如果您尝试:将鼠标悬停 在上方，它不会消失。

ul#topmenu li a#HyperLink:hover+ul {
  background-color: pink;
  display: list-item !important;
}

#Submenu:hover {
  background-color: pink;
  display: list-item !important;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu" style="display:none;">
      <li>
        <a href="#">News</a>
      </li>
    </ul>
  </li>
</ul>