CSS inheritance : ul style not applied to nested div

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".

New issue :

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.