Hover Dropdown Menu using HTML and CSS

Question

I have downloaded a boostrap template online and is making modifications to the template. However, I'd like my menu bar to hoverable dropdowns for each item in the menu bar. I have this for the css of the dropdown:

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

This is the html part:

<ul class="navbar-nav text-uppercase ml-auto dropdown">
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experts">Experts</a>
    <ul class="dropdown-content">
        <li><a href="#">Test dropdown</a></li>
    </ul>
    </li>
</ul>

I have been just following instructions online but I can't seem to get it right.

This is the output that I kept on getting:

It shows the submenu even if the cursor is not hovering over the menu.

Do you want it to only display when you hover over the Experts link? — James Whiteley
– James Whiteley, Commented Jul 31, 2018 at 14:34
I was going to say that you need to add the dropdown class to the relevant li and specify that you need .dropdown:hover > .dropdown-content instead of .dropdown:hover .dropdown-content, but I see that @HasuKimchi has beaten me to it :-) — James Whiteley
– James Whiteley, Commented Jul 31, 2018 at 14:42

Jakub Juszczak · Accepted Answer · 2018-07-31 14:33:49Z

1

Well you forgot to add the dropdownclass to your nav-item:

<ul class="navbar-nav text-uppercase ml-auto">
    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
    <li class="nav-item dropdown"><a class="nav-link js-scroll-trigger" href="#experts">Experts</a>
    <ul class="dropdown-content">
        <li><a href="#">Test dropdown</a></li>
    </ul>
    </li>
</ul>

And then you need to specify the direct child with > in if you hover selector.

.dropdown:hover > .dropdown-content {display: block;}

answered Jul 31, 2018 at 14:33

Jakub Juszczak

8,0774 gold badges23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D. Tan Over a year ago

At first it didn't work, but upon checking my css files I've noticed that there are two similar css there and I was only applying changes to one. I tried applying same changes to the other one and it worked! Thank you!

Collectives™ on Stack Overflow

Hover Dropdown Menu using HTML and CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related