CSS继承：ul样式不适用于嵌套div

Question

I ran into a problem trying to build a dropdown menu in a navbar, using nested lists.

Here's a snippet of the code :

 .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; } .dropdown:hover + .dropdown-content { display: block; } .dropdown-content a { padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } 

  <nav class="navbar navbar-default" role="navigation" data-600='opacity:0' data-1000='opacity:1'> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul id=navbar class="nav navbar-nav"> <li class="dropdown"><a href=index.html>Jeux de vilains ▼</a></li> <div class="dropdown-content"> <ul class="nav navbar-nav navbar-right"> <li class=secondary><a href=/carto2016-jeuxvideos/article-1.html>Tomb Raider</a></li> <li class=secondary><a href=/carto2016-jeuxvideos/article-2.html>GTA</a></li> <li class=secondary><a href=/carto2016-jeuxvideos/article-3.html>SimCity</a></li> <li class=secondary><a href=/carto2016-jeuxvideos/article-4.html>Call of Duty</a></li> <li class=secondary><a href=/carto2016-jeuxvideos/article-5.html>Resident Evil 5</a></li> <li class=secondary><a href=/carto2016-jeuxvideos/article-6.html>Civilization</a></li> </ul> </div> </ul> </div> 

This part was solved :

Basically, my problem is that I want my "dropdown" div to have no style of its own, but to inherit the style of the navbar.

The weird thing is that the nested navbar is properly styled, but the dropdown div follows the style of general a and hover:a elements.

If you look at the beginning of my HTML, you'll see the culprit: <div class="dropdown"> , which appears completely differently from the rest. I don't understand why the class in which it is nested (the nav class) is not considered the parent, especially since the following list is properly styled.

I attached a screenshot of what it looks like: "Jeux de vilains" looks weird, when it should look like "Règles du jeu".

This has been solved too

Well thank you all for you swift and kind help, I took out the unwanted div and put the dropdown class in the corresponding li.

However, while the list does appear on hover, it disappears as soon as the mouse is not hovered. I'd like to make it so the secondary menu appears as long as either the parent li or the secondary menu itself are hovered. How could I do that ?

Here's the website : http://medialab.github.io/carto2016-jeuxvideos/index.html

Thanks in advance for everyone's help.

Question solved.

Answer 1

Your first instinct would be to use JavaScript but for this but there's a slick way to accomplish this with what are essentially operators in CSS...

Use the :hover pseudo-class on a parent element and look for the instance of the dropdown.

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

Because you're selecting the parent element, it applies to both the dropdown and what you hover over to show it over so it's displayed whenever it's within those realms. Make more and they'll work just the same respective to their individual dropdowns.

https://jsfiddle.net/ksxk33w4/1/