Open Dropdown with hover and close menu when click a link

Question

I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link from the menu. I think at will need JS ?

.dropdow {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdow-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdow-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdow-content1 a:hover {
  background-color: #d86a1e
}

.dropdow:hover .dropdow-content1 {
  display: block;
  width: 100%;
}

<div class="dropdow">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1"><h3>please choose</h3></button>
    <div class="dropdow-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link from the menu. I think at will need JS ?

Answer 1

As a general rule CSS can't capture clicks to "do an action". Kumar's solution hijacks a hidden HTML element that does accept a state. Unfortunately, you can't change the checkbox state "checked/unchecked" with the CSS so you won't be able to trigger the menu with a hover.

If you want to have both a hover trigger (onMouseEnter) AND a close click (onClick) event to exit, you'll need to use some javascript.

That said, I strongly urge you to rethink the use of multiple interaction types. The hover/click combo is bad for usability as it requires people to understand and be able to use both interactions. For example, hover won't trigger on a touch device. And there's nothing to help a user understand "click to exit" vs "hover to open".

If you want this to work for most users, especially those on a touch device, I'd stick with the click only.

Answer 2

Yep, but you might need to change some layout by adding <label> and a checkbox:

.dropdow {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdow-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdow-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdow-content1 a:hover {
  background-color: #d86a1e
}

#dd {
  display: none;
}

#dd:checked+.dropdow-content1 {
  display: block;
  width: 100%;
}

<div class="dropdow">
  <div class="gap">
    <h3>Dropdownmenu</h3>
    <label class="dropbt1" for="dd"><h3>please choose</h3></label>
    <input type="checkbox" id="dd" />
    <div class="dropdow-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>