css hover not rendering - html

Question

I am new to CSS and I was trying to create a very basic navigation bar.
My HTML and CSS are given below.
The problem is when I hover over my FEATURES tab nothing happens even though I have changed the feature-menu displays to flex from none upon hovering.
I am not able to find any mistake in my code. Could anyone please tell where I have gone wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown span:hover .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
left: 990px;
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>

Answer 1

Let's review your HTML structure.
Here's the relevant part:
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
.
.
.
Here's the CSS selector you're applying:
.dropdown span:hover .features-menu
So the problem is clear.
You're going from one level (.dropdown), down a level (to the span), then back up a level (to the .features-menu).
You're trying to target the .features-menu from an element positioned lower in the HTML structure. CSS doesn't work that way.
CSS can only target downward or forward. It cannot target upward or backward.
These concepts are explained in detail in these posts:
Is there a CSS parent selector?
Is there a "previous sibling" CSS selector?
You can make your hovering work by targeting "forward" (using your original – malformed – HTML), using sibling combinators (+ or ~).
.dropdown:hover + .features-menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover + .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span></li><!-- closing tag doesn't go here -->
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Or, you can make your hovering behavior work by targeting "downward" (using correctly formed HTML), using descendant selectors (> or [space]).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
background: #D6E9FE;
position: fixed;
width: 100%;
padding: 50px;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
padding: 20px;
margin-right: 15px;
}
body {
height: 1200px;
font-size: 18px;
font-family: sans-serif;
color: #5D6063;
}
.dropdown:hover > .features-menu {
display: flex;
flex-direction: column;
background: #B2D6FF;
border-radius: 5px;
padding-top: 60px;
position: absolute;
top: 50px;
/* left: 990px; */
}
.features-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown>span {
z-index: 2;
position: relative;
cursor: pointer;
}
.features-menu {
z-index: 1;
display: none;
}
<div class='header'>
<div class='logo'><img src='...' /></div>
<ul type="none" class='menu'>
<li class='dropdown'><span>Features ▾</span>
<ul class='features-menu'>
<li><a href='#'>Harder</a></li>
<li><a href='#'>Better</a></li>
<li><a href='#'>Faster</a></li>
<li><a href='#'>Stronger</a></li>
</ul>
</li><!-- closing tag goes here -->
<li><a href='#'>Blog</a></li>
<li><a href='#'>Subscribe</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>