I currently ran on a problem trying to build a dropdown menu in a navbar, using nested lists.
Here's a snippet of the code :
/** Dropdown **/
.dropdown {} .dropdown a {
font-size: inherit;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<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">
<div class="dropdown">
<li><a href="/carto2016-jeuxvideos">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>
</div>
<li class=active><a href=index.html#regles-du-jeu>Règles du jeu</a>
</li>
</ul>
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 begiing of my HTML, you'll see the culprit : , 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".
Thanks in advance for everyone's help.