使用css在悬停时扩展下拉菜单 [英] Expanding drop down menu on hover using css

问题描述

我正在尝试为我的导航栏创建一个下拉菜单，以便当我将鼠标悬停在选项卡上时，它会打开一个包含更多选项的下拉菜单.这是我的代码的 fiddle.最终的产品应该看起来像 this，现在我只想修复下降向下悬停它的一部分.

I'm trying to get a drop down menu for my navbar so that when I hover over the tabs it opens a drop down menu with more options. Here is a fiddle of my code. The very final product should look like this, for now I just want to fix the drop down on hover part of it.

这是我在 css 中使用的一段代码来尝试实现这一点:

Here is a snippet of code im using in css to try and achieve this:

.dropdown {
    display: none
}

.navbar-list li:hover .dropdown {
    display: relative;
    color: white;
    text-decoration: none;
}

推荐答案

你的 HTML 结构错误，你需要在悬停时使用 display:block 而不是 display:relative代码>

Your HTML structure is wrong, and you need to use display: block on hover, not display: relative

但是对于 HTML，ul 不能是 ul 的直接子代.您需要将下拉列表嵌套在 li 中.这不仅是正确的标记，而且当您将鼠标悬停在具有嵌套菜单的 li 上时，它允许悬停持续存在.否则，您将需要使用 li:hover + .dropdown 来显示下一个 .dropdown 菜单，但是您的 :hover 一旦鼠标移离 li.

But re: the HTML, a ul can't be a direct child of a ul. You need to nest the dropdowns in an li. That is not only correct markup, but it allows the hover to persist when you hover over an li that has nested menus. Otherwise, you would need to use li:hover + .dropdown to show the next .dropdown menu, but your :hover will stop once your mouse moves off of the li.

此外，单个嵌套导航元素中的每个 ul.dropdown 可能只是单个 ul 的 li，但你所拥有的并没有错，所以我没有改变.

Also, each ul.dropdown that is in a single nested nav element could probably just be li's of a single ul, but what you have isn't incorrect, so I didn't change that.

.dropdown {
  display: none
}

.navbar-tags:hover > .dropdown {
  display: block;
  color: white;
  text-decoration: none;
}

.navbar-list a {
  color: black;
  text-decoration: none;
}

.navbar-tags {
  margin: 20px;
}

.navbar-tags, .dropdown { 
  padding: 0;
  list-style-type: none;
}

<ul class="navbar-list">
  <li class="navbar-tags">
    <a href="#">OUR DNA</a>
    <ul class="dropdown">
      <li><a href="">Risk</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">PROGRAMS</a>
    <ul class="dropdown">
      <li><a href="">Adventure Sport</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Entertainment</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Collegiate</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Individual</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Commercial</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">RESEARCH</a>
    <ul class="dropdown">
      <li><a href="">Corporate Survey</a></li>
    </ul>
    <ul class="dropdown">
      <li><a href="">Individual Survey</a></li>
    </ul>
  </li>
  <li class="navbar-tags"><a href="#">STORIES</a></li>
</ul>

这篇关于使用css在悬停时扩展下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！