CODEWITHSUNDEEP
htmlcssdrop-down-menuhovernavbar
user1813228
user1813228

Reputation:

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

Upvotes: 1

Views: 5776

Answers (3)

Ehsan
Ehsan

Reputation: 12959

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>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 0

LKG
LKG

Reputation: 4192

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

Upvotes: 1

Related Questions