Good day,
I am trying to create a dropdown menu on my freshly new website but cannot find the reason as to why it does not appear.
It should appear under "About" but when I click on it nothing appears!
Could someone help me?
Maybe the problem has a link with the display:none// display:block?
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
background-color: #101010;
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.header {
width: 100%;
height: 200px;
display: block;
background-color: #101010;
}
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: red;
}
.logo_container {
height: 100%;
display: table;
float: right;
position: relative;
right: 40%;
}
.logo_container h1 {
color: bisque;
font-family: "Whisper", cursive;
font-weight: 400;
font-style: normal;
}
.menu_navbar {
background: blue;
text-align: center;
}
.menu_navbar ul {
display: inline-flex;
list-style: none;
color: bisque;
text-align: center;
}
.menu_navbar ul li {
width: 120px;
margin: 15px;
padding: 15px;
}
.menu_navbar ul li a {
text-decoration: none;
color: bisque;
}
.active,
.menu_navbar ul li:hover {
background: transparent;
}
.sub_menu_navbar_1 {
display: none;
}
.menu_navbar ul li:hover .sub_menu_navbar_1 {
display: block;
position: absolute;
background: blue;
margin-top: 15px;
margin-left: -15px;
}
.menu_navbar ul li:hover .sub_menu_navbar_1 ul {
display: block;
margin: 10px;
}
<header>
<div class="header">
<div class="inner_header">
<div class="logo_container">
<h1>Céramique & Porcelaine</h1>
</div>
</div>
</div>
</header>
<div class="menu_navbar">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<div class="sub_menu_navbar_1">
<ul>
<li><a href="#">The Shop</a></li>
<li><a href="#">The Artist</a></li>
</ul>
</div>
<li><a href="#">Contact</a></li>
</ul>
</div>
Thank you in advance!
2
Answers
The problem is here,
According to your styling rule to trigger the hover effect on the sub_menu_navbar the element needs to inside li element. Like below,
I hope this helps.
The dropdown menu should be nested within the
li
element that triggers it, but in your code, the.sub_menu_navbar_1
is placed outside of anyli
element. This can cause the CSS hover selector to not work as intended.The
position: relative;
on theli
ensures that the absolutely positioned.sub_menu_navbar_1
is placed relative to theli
itself, not the entire page or another parent element.