Expanding drop down menu on hover using css

问题

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.

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

回答1:

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

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.

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>

回答2:

You are trying wrong approach, please change your css part

.navbar-list li:hover .dropdown {
    display: block;
    color: white;
    text-decoration: 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>

update code

回答3:

1 ) Your HTML structure is wrong.

2) use display: block instead of display: relative.

Change your Code Like THis :

.dropdown {
    display: none
}

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

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

.navbar-tags {
    padding: 0;
    list-style-type: none;
    margin: 20px;
}

<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="">Professional</a></li>
            </ul>
            <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>

来源：https://stackoverflow.com/questions/44125218/expanding-drop-down-menu-on-hover-using-css

标签

html

css

drop-down-menu

hover

navbar