Home How to avoid the dropdown from disappearing when removing cursor from the button?

Questions

How to avoid the dropdown from disappearing when removing cursor from the button?

January 9, 2023

When I hover over the button I see the dropdown menu however, when I navigate to any of the item on the menu the dropdown menu just disappears. I think I know the problem is that I have hover added on the button only, but how can I make it work like a normal dropdown ?

.dropdown {
  display: inline-block;
  padding: 5px;
  /* background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

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

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

I want the dropdown menu to stay visible while I am hovering over the child elements in the dropdown menu as any other dropdown menu works.

>Solution :

You could set the :hover property directly on the .dropdown element like this :

.dropdown {
  display: inline-block;
  padding: 5px;
  /*background:#f1f1f1; */
}

.dropbtn {
  padding: 5px;
  margin-bottom: 0px;
  width: 100%;
}

.dropdown-content {
  display: none;
  list-style: none;
  background: #f1f1f1;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.dropdown-content li {
  margin-bottom: 0px;
  padding: 3px;
}

.dropdown-content li a {
  text-decoration: none;
  color: black;
  padding: 3px;
}

.dropdown-content li:hover,
.dropdown-content li a:hover {
  text-decoration: none;
  color: white;
  background-color: #333;
}

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

<div class="dropdown">
  <button class="dropbtn">More</button>
  <ul class="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>