Building dropdowns menu with CSS

Question

I'm building a dropdowns menu that appears when hovering the mouse over the title. Although I followed some instruction on w3schools, my code doesn't work and I don't know why and how to fix it. All answers is appreciated. Here is my code:

.dropdown {
  display: block;
  position: relative;
}
.dropdown-content {
  display: none;
  width: 100%;
  position: absolute;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="menu">
    <h2 class="dropdown">Menu</h2>
    <div class="dropdown-content">
      <ul>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
        <li>
          <a href="#">Content</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

Abdul Mateen Mohammed · Accepted Answer · 2016-12-10 11:13:17Z

1

You need to write the hover styles on the wrapper i.e. <div class="menu">...</div> because the element <div class="dropdown-content">...</div> is a descendant of it.

Also give display: inline-block; to the element that is used to open the drop down menu here it is the <h2 class="dropdown">Menu</h2> doing so will keep the drop down menu open when the cursor is over it allowing the user to pick an option.

Check the below code snippet.

.dropdown {
  display: inline-block;
  position: relative;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
}
.menu:hover .dropdown-content {
  display: block;
}

<div class="menu">
  <h2 class="dropdown">Menu</h2>
  <div class="dropdown-content">
    <ul>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
      <li>
        <a href="#">Content</a>
      </li>
    </ul>
  </div>
</div>

edited Dec 10, 2016 at 11:13

answered Dec 10, 2016 at 11:02

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brother Eye Over a year ago

aha...I got it! Thanks a lot!

ashish singh · Accepted Answer · 2016-12-10 10:51:28Z

0

well a sneaky bug there

.dropdown:hover+.dropdown-content {
    display: block;
}

.dropdown and .dropdown-content

they are siblings not parent child

indentation of your html is deceiving

answered Dec 10, 2016 at 10:51

ashish singh

6,9142 gold badges18 silver badges42 bronze badges

1 Comment

Brother Eye Over a year ago

well...the editor make it quite hard to get a perfect indentation...at least for me... Thank you, any way!

Venu Madhav · Accepted Answer · 2016-12-10 10:54:13Z

0

Try this codepen...

Actually what you are doing mistake is you have to show the sibling of your heading on hover what you are doing is.dropdown:hover .dropdown-content {display: block;} to apply styles to sibling we have to use + like tthis .dropdown:hover + .dropdown-content {display: block;}.

hope you understand.

answered Dec 10, 2016 at 10:54

Venu Madhav

4431 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Building dropdowns menu with CSS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related