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

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 >
  <button >More</button>
  <ul >
    <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.

CodePudding user response：

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 >
  <button >More</button>
  <ul >
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CodePudding user response：

You are using hover in CSS, which is the normal behaviour for your case. If you want to click on the button, and display the dropdown you will need some Javascript and an onclick event :

function showDropdown() {
  var content = document.getElementById("dropdown-content");
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}

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

<div >
  <button  onclick="showDropdown()">More</button>
  <ul  id="dropdown-content">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>