Question

我想在: hover超过法语时显示法语下的“新闻”。

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>

如果您想通过“新闻”获取:hover，还可以使用以下内容：

添加

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

显示“新闻”后，如果您尝试: hover以上，则不会消失。

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>

Answer 2

您可以使用以下（较小/优化）解决方案：

/** hide the submenu by default. */
ul#topmenu li ul {
  display: none;
}

/** show the submenu on hover of the menu item. */
ul#topmenu li:hover ul {
  background-color: pink;
  display: block;
}

<ul id="topmenu">
  <li class="langHorzMenu">
    <a href="#" id="HyperLink">French</a>
    <ul id="Submenu">
      <li><a href="#">News</a></li>
    </ul>
  </li>
</ul>

目前，CSS规则尝试在<ul>元素中选择<{1}}元素元素。您可以稍微更改CSS规则以获得更简单的规则。

您还应该避免使用内联CSS（例如<a>）。尝试在<ul id="Submenu" style="display:none;">元素或外部CSS文件（推荐）上定义所有CSS规则。

您还可以使用以下内容扩展菜单：

<style>

/** hide the submenu by default. */
ul li ul {
  display: none;
}

/** show the submenu on hover of the menu item. */
ul > li:hover > ul {
  background-color: pink;
  display: block;
}

Answer 3

您需要从子style="display: none"中删除ul 您的HTML将是这样的

<ul id="topmenu">
        <li class="langHorzMenu">
               <a href="#" id="HyperLink">French</a>
                            <ul id="Submenu">
                                <li><a href="#">News</a></li>
                            </ul>
        </li>
</ul>

添加css

ul#topmenu li ul{
  background-color: pink;
  display: none;
}
ul#topmenu li:hover ul{
  background-color: pink;
  display: block;
}

工作小提琴here

为何在超链接上悬停时不显示第二级嵌套列表项？

3 个答案: