css hover not rendering

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>

I don't know why it does not work with the span but this works: ".dropdown:hover + .features-menu". Ignrore the span and add sibling selector. — Henning Fischer, Dec 22 '18 at 14:37

Michael Benjamin · Accepted Answer · 2018-12-23T13:05:44.047

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:

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>

css hover not rendering

1 Answers1