Hover on CSS dropdown menu doesn't work correctly

Question

I've just built my navigation bar but I have one small issue with the dropdown menu. The dropdown menu appears on hover however when I try to move the mouse from the top link on the nav bar to the dropdown underneath, the dropdown menu disappears so I'm not able to actually click on any of the links.

How would I fix this?

CSS

/* Navbar */
h1 {
    color: white;
    font-family: 'Great Vibes', cursive;
    margin-left: 30px;
    font-size: 45px;
   text-align: left;
    margin-top: -57px;
  }

  .navbar {
  background: rgba(179, 173, 140);
  font-family: 'Hind', sans-serif;
  height: 4.5rem;
  width: 1280px;
  margin-top: -8px;
  margin-left: -8px;
} 

/* Links inside the navbar */
.navbar a {
  float: right;
  font-size: 18px;
  color: white;
  line-height: 44px;
  padding: 14px 16px;
  text-decoration: none;
} 

/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
}

.retreat-dropdown {
    color: white;
    font-size: 18px;
    position: relative;
    margin-top: 26px;
}

.navbar a:hover, .dropdown:hover  {
    text-decoration: underline white;
  }
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: 'Hind', sans-serif;
  }
  .dropdown-content a:hover {
    background-color: rgb(197, 192, 166);
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: rgb(160, 189, 127);
    font-family: 'Hind', sans-serif;
    z-index: 1;
    margin-top: 20px;
  }
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
    margin-left: -30px;
  }
    #page-container {
      position: relative;
      min-height: 100vh;
    }

drsimonz · Accepted Answer · 2019-08-10 20:35:22Z

2

Keeping the menu open with pure CSS is a classic problem. Easier to solve with javascript (which also lets you add a delay so it doesn't close immediately when you accidentally mouse out for a second, which is a massive usability improvement). But if you want to do it in pure CSS then you should open up the dev tools and enable the :hover modifier on your .dropdown element. That should make it more obvious what the problem is. I suspect it's something involving this overflow:hidden:

.dropdown {
  float: right;
  overflow: hidden;
}

Since .dropdown-contents is position: absolute the parent will have no idea how big the contents are, and they will be considered overflow. This will probably become obvious once you open up the dev tools.

answered Aug 10, 2019 at 20:35

drsimonz

5795 silver badges8 bronze badges

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

1 Comment

SK1dev Over a year ago

Thank you for your answer. If it's easier to do that in JavaScript could you tell me what JS code to write to get it fixed please?

Collectives™ on Stack Overflow

Hover on CSS dropdown menu doesn't work correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related