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

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

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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related