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。任何答案，比如使用bootstrap或将菜单转换为<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%。像这样：

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

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

3 个答案: