CSS Question
Only show dropdown menu on hovering the parent li
I am trying to build a dropdown menu. My problem is that hovering the content also shows the dropdown menu. I am currently using this code:
/* actual dropdown menu */
#menu-hauptmenue {
height: 45px;
}
.sub-menu {
opacity: 0;
background: #4d4d4d;
display: block;
z-index: 200;
width: 250px;
position: absolute;
margin-top: 23px;
}
.sub-menu li {
display: block;
width: 250px;
line-height: 2.7;
padding: 10px 15px 10px 15px;
z-index: 220;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
}
.sub-menu li a {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
.sub-menu li:hover {
background-color: #333333;
cursor: pointer;
}
.sub-menu a:hover {
border-bottom: none;
}
#menu-hauptmenue li:hover .sub-menu {
opacity: 1;
}
#billboard img {
z-index: 1;
}
li {
z-index: 20;
}
.clearfix:after {
display: block;
clear: both;
}
nav>ul>li {
position: relative;
}
nav.open .sub-menu {
padding-top: 0px;
display: none;
}
/* styling of the nav */
nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
nav ul li a:hover {
border-bottom: 1px solid #4D4D4D;
}
<nav>
<ul id="menu-hauptmenue">
<li><a href="#">Parent 1</a>
<ul class="sub-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a></li>
<li><a href="#">Parent 3</a></li>
</ul>
</nav>
As you can see, hovering the content below the navigation also displays the dropdown menu. It would be better to only display the navigation when hovering the parent li element, in this case 'Parent 1'. How can I achieve this the best way? Thank you for your advice.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
It's because your element is present with 0 opacity so you are able to interact with it. You may try using display:none/block like this:
/* actual dropdown menu */
#menu-hauptmenue {
height: 45px;
}
.sub-menu {
opacity: 0;
background: #4d4d4d;
display: none;
width: 250px;
position: absolute;
margin-top: 23px;
}
.sub-menu li {
display: block;
width: 250px;
line-height: 2.7;
padding: 10px 15px 10px 15px;
z-index: 220;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
}
.sub-menu li a {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
.sub-menu li:hover {
background-color: #333333;
cursor: pointer;
}
.sub-menu a:hover {
border-bottom: none;
}
#menu-hauptmenue li:hover .sub-menu {
opacity: 1;
display:block;
}
#billboard img {
z-index: 1;
}
li {
z-index: 20;
}
.clearfix:after {
display: block;
clear: both;
}
nav>ul>li {
position: relative;
}
nav.open .sub-menu {
padding-top: 0px;
display: none;
}
/* styling of the nav */
nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
nav ul li a:hover {
border-bottom: 1px solid #4D4D4D;
}<nav>
<ul id="menu-hauptmenue">
<li><a href="#">Parent 1</a>
<ul class="sub-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a></li>
<li><a href="#">Parent 3</a></li>
</ul>
</nav>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download