HTML/CSS 下拉导航菜单未显示

Question

我正在尝试创建一个具有visibility:none绝对 div 框的下拉导航visibility:none但我认为当我悬停时，我没有使用正确的元素。 有什么帮助吗？ 我认为问题出在代码的最后一部分。 谢谢

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding: 5px; display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0 -3px; } li>a:hover { background-color: white; color:#000; } .nav-level-2 { visibility: hidden; position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: red; text-align: left; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; -ms-flex: 0px 1px auto; -webkit-box-flex: 0; -webkit-flex: 0px 1px auto; flex: 0px 1px auto; } li>a:hover .nav-level-2{ display: block; }

 <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div><a href="#">Submenu</a> </div> </div> </div> </li> </ul> </div> </div> </nav>

Answer 1

您需要添加visibility:visible悬停时visibility:visible在悬停后添加+符号，因为子菜单 div 位于锚点之外。 li>a:hover .nav-level-2到li>a:hover + .nav-level-2 。 +指的是悬停元素的下一个元素。

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding: 5px; display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0 -3px; } li>a:hover { background-color: white; color:#000; } .nav-level-2 { visibility: hidden; position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: red; text-align: left; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; -ms-flex: 0px 1px auto; -webkit-box-flex: 0; -webkit-flex: 0px 1px auto; flex: 0px 1px auto; } li>a:hover + .nav-level-2{ visibility:visible; }

 <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div><a href="#">Submenu</a> </div> </div> </div> </li> </ul> </div> </div> </nav>

Answer 2

最后的选择器不正确。 您指定的内容将在悬停时选择锚标记内具有“nav-level-2”类的所有元素。 您需要使用“+”选择器选择紧跟在锚标记之后的 div。 并且还使 div 可见。

为此，请尝试将最后的 css 代码更改为 -

li>a:hover + .nav-level-2{
    visibility: visible;
}

编辑：

要在将鼠标指针移入菜单时保持菜单打开，您需要将悬停选择器提供给容器 div。

我已经更改了 css 的最后一点以选择类为 'nav-whats-new' 的 'li' 元素，并且我在其上使用了悬停选择器来更改 'nav-level-2' 元素的可见性 -

li.nav-whats-new:hover .nav-level-2 {
  visibility: visible;
}

这是更新的小提琴 -

https://jsfiddle.net/hbbaq9tf/3/