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>

当我悬停“LANGUAGES”时，我需要出现另一个：

<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>

附注：

除非你需要对点击事件采取行动，否则示例
您正在使用空标记，可能仅用于样式目的。如果您需要一个图标，只需将其作为该列表项的背景（或content伪元素的:before属性）

如何显示<ul>？</ul>

1 个答案: