Why does the (.nav-element>a:hover) in the given code work properly, but the (.nav-element>a:hover .nav-dropdown1) does not seem to respond? I have attempted various methods to activate it, but is there an issue with the syntax in the rule that is causing it not to work? Below is the complete code that I have:
.nav-contaier {
clear:left;
background-color: #3B3B3B;
}
.element-container {
background-color:#3B3B3B;
height: 4em;
width: 100%;
margin: auto;
}
.element-container>ul {
width: 80%;
height: 100%;
margin: auto;
display: flex;
}
.nav-element {
text-align: center;
flex: 0 0 20%;
color: white;
display: inline-block;
margin-left: 0;
margin-right: 0;
}
.nav-element>a {
line-height: 4em;
color: white;
height: 100%;
width: 100%;
display: block;
}
.nav-element>a:hover {
background-color: black;
}
.nav-dropdown1 {
display: block;
opacity: 0;
width: 80%;
height: 100%;
margin-left: 10%;
position: absolute;
height: 2em;
z-index: 10;
background-color: blue;
}
.nav-element>a:hover .nav-dropdown1 {
opacity: 1;
height: 3em;
}
//HTML FROM HERE
<div class="nav-contaier">
<nav class="element-container">
<ul>
<li class="nav-element"><a href="index.html">Home</a></li>
<li class="nav-element"><a href="index.html">Menu</a></li>
<li class="nav-element"><a href="index.html">Lorem</a></li>
<li class="nav-element"><a href="index.html">Ipsum</a></li>
<li class="nav-element"><a href="index.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
<div class="nav-dropdown1">
</div>