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