Nothing dropping down from drop down menu in navigation bar HTML CSS - html

Question

I've looked through other questions but none seem to explain the problem I'm having. I want to create a drop down menu to an already existing navigation bar, and I think it's a problem with the way I've named the classes.
Here is my HTML code for the nav bar
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
And here is the CSS I have tried to implement:
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
I works otherwise, the menu just doesn't drop down. Can anyone help? Thanks a lot!

Answer 1

Your selector to show the menu on hover is .extendMenuClass:hover .extendedDiv, but .extendedDiv is not a child of .extendMenuClass. Updated that so that it is a child and that selector will work.
Then you need to remove overflow: hidden; from .customMenu since .extendedDiv will bleed below/outside of .customMenu and will be hidden if overflow is hidden.
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div></li>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>

Answer 2

Common syntax for navigation is nesting unordered lists inside other unordered lists.
so you'd set it up like:
<ul class="main-nav">
<li>1</li>
<li class="dropdown">2
<ul class="dropdown-list">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</li>
<li>3</li>
</ul>
It's a lot easier to keep parent and child elements in order.
I just set it up a little easier for you to follow and continually add items:
HTML:
<ul class="customMenu">
<li style="background:red;">Home</li>
<li class="extend">Cities
<ul class="dropdown">
<li>Paris</li>
<li>Lyon</li>
<li>Toulouse</li>
</ul>
</li>
<li>Phrases</li>
<li>Bank Accounts</li>
<li>Important Notes</li>
<li>CAF</li>
<li style="background: red; float: right;">Déconnexion</li>
</ul>
CSS:
ul.customMenu {
width: 100%;
background: #00264d;
}
ul.customMenu li {
display: inline-block;
}
ul.customMenu li a {
display: block;
font-size: 23px;
color: #fff;
text-decoration: none;
padding: 16px 17px;
}
ul.customMenu li a:hover {
color: red;
}
ul.customMenu li ul.dropdown {
display: none;
position: absolute;
top: 55px;
left: -5px;
background: red;
overflow: hidden;
}
ul.customMenu li ul.dropdown li a {
display: block;
width: 100%;
padding: 16px 20px;
}
ul.customMenu li ul.dropdown li a:hover {
color: #fff;
background: #cc0000 !important;
}
li.extend {
position: relative;
}
li.extend:hover ul.dropdown {
display: block !important;
}