Hide a dropdown/popup menu when a menu item is clicked - without javascript (CSS only)-CodePudding

As posted in this question: Hide dropdown menu on click in CSS, I'm looking for a CSS-only way to hide a popup/dropdown menu when one of the links is clicked. An answer was given by Abhijeet Vadera that is almost a great answer - except links in the dropdown menu don't actually do anything/go anywhere. I copied and pasted the code into a test page I've been working on and modified the targets in the links. The dropdown does pop up when hovering over the button, but clicking any of the links does absolutely nothing other than hiding the dropdown.

Does anyone know why this is and (especially) how to make it work? So close....

P.S. Stackoverflow text below my answer on that question tells me that I should ask my own question rather than commenting on another answer or seeking clarification, so that's what I'm doing.

CodePudding user response：

If you don't want to write JavaScript, the easiest way is to use hastags. Let me explain.

If you press a button, it is an "a" tag whose "href" tag says, for example, #hide

And then the CSS part should look something like this:

I hope I could help.

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

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

.dropdown:hover .dropbtn {background-color: #3e8e41;}


.dropbtn a {
  text-decoration: none;
}

.dropdown-content {
  visibility: visible;
}

#hide:target{
  visibility: hidden;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div >
  <a  href="#">Dropdown</a>
  <div  id="hide">
    <a href="#hide">Link 1</a>
    <a href="#hide">Link 2</a>
    <a href="#hide">Link 3</a>
  </div>
</div>

</body>
</html>

CodePudding user response：

The best way to have js-like behaviour is to use checkboxes.

You hide an input checkbox in the same container (this is important) than the hidden menu. If the checkbox is checked, you display the menu, if the checkbox is not checked you hide it. To trigger the checkbox you can put labels wherever you want on your code as long as it has the "for" attribute that matches with the id of your checkbox.

The trick here is to use the "~" selector which allows you to select a "brother" element. In my code you can see "#showMyMenu:checked ~ .popup" which means "select the popup class which is brother with a checked #showMyMenu".

On my example I putted two labels: one inside and one outside the menu, but you can of course use the same label to trigger the hide/display of your menu !

#showMyMenu {
    display: none;
}
label {
    display: inline-block;
}
.popup {
    display: none;
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0);
    padding: 20px;
    border-radius: 3px;
}
#showMyMenu:checked ~ .popup {
    display: block;
}

<input type="checkbox" id="showMyMenu">
<label for="showMyMenu">Show menu</label>
<div >
    <label for="showMyMenu">Hide menu</label>
    <ul>
        <li>
            <a href="#">An item</a>
        </li>
        <li>
            <a href="#">An item</a>
        </li>
        <li>
            <a href="#">An item</a>
        </li>
    </ul>
</div>