如何显示 <UL>？

Question

情况，这样的菜单：

<ul class="top_right_menu">
    <li class="top_right_submenu"><a href="#"><i class="fa fa-globe"></i> LANGUAGES</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">LOGIN</a></li>
</ul>

当我悬停在"语言"上时，我需要显示另一个：

<ul class="hover_top_right_menu">
    <li>ENGLISH</li>
    <li>SPANISH</li>
    <li>RUSSIAN</li>
    <li>GERMAN</li>
</ul>

有必要使其在CSS，JQuery或没有JavaScript的情况下工作。这是一个版本不起作用：

.hover_top_right_menu {
    display: none;
}

这是一条错误的路线

.top_right_submenu: hover, hover_top_right_menu {
    display: visible;
}

Answer 1

你的css中有一些错别字

默认情况下，元素.hover_top_right_menu应具有display: none 。当您将鼠标悬停在子菜单上时，您可以更改其显示（使用 display: block ）。

.hover_top_right_menu {
    display: none;
}

.top_right_submenu:hover .hover_top_right_menu {
    display: block;
}

---

无论如何，这个 css 是基于语言列表嵌套到.hover_top_right_menu元素中的假设，例如：

<ul class="top_right_menu">
    <li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
       <ul class="hover_top_right_menu">
          <li>ENGLISH</li>
          <li>SPANISH</li>
          <li>RUSSIAN</li>
          <li>GERMAN</li>
       </ul>
    </li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">LOGIN</a></li>
</ul>

---

作为旁注：

• 除非您需要对点击事件执行操作，否则该示例不需要"语言"周围的链接

• 您正在使用空标记，可能仅用于样式设置目的。如果您需要一个图标，只需将其作为该列表项的背景（或作为其:before伪元素的属性content）