CODEWITHSUNDEEP
csshovernavbardropdown
SK1dev
SK1dev

Reputation: 1139

Hover on CSS dropdown menu doesn't work correctly

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;
    }

Upvotes: 1

Views: 948

Answers (1)

drsimonz
drsimonz

Reputation: 580

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.

Upvotes: 2

Related Questions