使用CSS显示子菜单而不使用无序列表

Question

我有一个关于显示CSS子菜单的问题。 我有以下HTML代码：

<div class="navigation">
    <a class="active" href="/">Home</a>
    <a href="/">Test1</a>
    <a href="/">Test2</a>
    <div class="submenu-wrapper">
      <a href="/">Test3</a>
      <div class="submenu">
        <a href="/">Submenu1</a>
        <a href="/">Submenu2</a>
      </div>      
    </div>
    <a href="/">Test4</a>
</div>

由于实施限制，我无法将结构更改为例如<ul>格式。

我在网上做了一些研究，以了解如何使用CSS来显示子菜单。 我尝试了以下操作：

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

关于我当前的实现，谁能告诉我为什么这行不通以及如何解决这个问题。

完整代码在这里： JSFIDDLE

PS。 任何使用引导程序或将菜单转换为<ul>格式的答案都不是我想要的；）

Answer 1

您的代码：

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

您的.submenu不在a 。 您可以使用兄弟选择器：

.navigation .submenu-wrapper a:hover + .submenu{display:block;}

但是要使子菜单可用，请确保您的.submenu-wrapper高度与其内容高度相同（通过为其设置固定高度或:after{clear:both;}进行设置）：

.navigation .submenu-wrapper:hover .submenu{display:block;}

由于您的.submenu是绝对定位的，因此您还需要定位其父级，否则.submenu会从屏幕上掉落（因为您将top:100%相对于正文的top:100% ）。 像这样：

.navigation .submenu-wrapper {position: relative;}

更新小提琴： https : //jsfiddle.net/xrtjngdr/4/

Answer 2

您可以通过更改来实现

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

.navigation .submenu-wrapper a:hover + .submenu{display:block;}

您还必须添加

.submenu:hover{
  display:block;
}

因为如果您想单击子菜单，链接将消失

Answer 3

只需进行一些小更改，您便会变得很黄金。

有关更改，请参见下面的代码中的注释。

 .navigation { margin: 0; padding-left: 0; list-style: none; float: left; } .navigation .submenu-wrapper { float: left; display: block; position: relative; /* add relative position */ } .navigation > a, .navigation .submenu-wrapper a { float: left; position: relative; display: block; font-size: 20px; padding-right: 14px; padding-left: 14px; padding-top: 5.5px; padding-bottom: 8.5px; color: #000; text-decoration: none; } .submenu { position: absolute; display: none; /* display none */ top: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; list-style: none; font-size: 18px; text-align: left; background-color: #245d94; border: 1px solid #fff; border-radius: 0; box-shadow: none; border-left: none; border-right: none; } .navigation a:hover { color: #fff; background-color: #245d94; } .navigation a.active { color: #fff; background-color: #e36c0a; } .navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */ display: block; } 

 <div class="navigation"> <a class="active" href="/">Home</a> <a href="/">Test1</a> <a href="/">Test2</a> <div class="submenu-wrapper"> <a href="/">Test3</a> <div class="submenu"> <a href="/">Submenu1</a> <a href="/">Submenu2</a> </div> </div> <a href="/">Test4</a> </div>