CSS inheritance : ul style not applied to nested div - html

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/