shortcut shortcut - 1 year ago 58
CSS Question

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download