CODEWITHSUNDEEP
htmlcsscss-selectorshover
rohit_r
rohit_r

Reputation: 713

css hover not rendering

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>

Upvotes: 2

Views: 182

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371689

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>

Upvotes: 1

Related Questions