如何在移动设备上关闭基于悬停的CSS下拉菜单

Question

I'm trying to make a web page that will dynamically work with desktops, tablets and mobile devices. I made a CSS only drop down menu based off of the hover selector (I think that's what it's called, I'm still very much a novice). It works great on a desktop, it shows up fine on mobile, my problem is that the drop down menu wont hide itself on mobile when not being interacted with. I understand that hover doesn't translate will to mobile devices, I was hoping that by tapping off of the drop down menu, it would hide itself again.

I attempted to recreate the drop down menu with a button and a little javascript, but it became a mess to try to position the elements with css. It seems the css only approach is the least complex to style. I am open to ideas involving javascript though.

PS, please forgive the messy css, I haven't cleaned it up yet. It's something I'm still learning to work with.

 <nav class="nav-main">
         <ul>
           <a href="index.html"><li>Home</li></a>
           <a href="index.html#main"><li>About</li></a>
           <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Services</a>
              <div id="menu-box" class="dropdown-content">
                <a href="index.html#main">Overview</a>
                <a href="index.html#main">General Practice</a>
                <a href="index.html#main">Sports Physicals</a>
                <a href="index.html#main">Weight Loss</a>
              </div>
           </li>
           <a href="index.html#main"><li>Doctor's Daily Dose</li></a>
           <a href="index.html#main"><li>Contact</li></a>
         </ul>
       </nav>

}
nav ul li:hover{
  background-color: #D7868C;
  border-radius: 0.3em;
}

@media only screen and (max-width: 874px){
  nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  nav ul li{
    text-align: center;
    flex-direction: column;
  }
  header {
    flex-direction: column;
    width: 100%
  }
  nav ul a{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  nav{
    flex-direction: column;
  }
  #logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.2em;
}
}
footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid #343434;
  padding-top: 1em;
  margin-left: 0.1em;
  margin-right: 0.1em;
}
@media only screen and (max-width: 439px) {
  .footSec{
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #D7868C;
  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;
  text-align: left;
}

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

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

The drop down menu will show up on a mobile if you tap the services list item. It just won't go away even after tapping off of it, only if you open a different link or refresh the page. My hope was that tapping off of it would act the same as removing a courser from the hover point. It does not seem to be the case.

Answer 1

Here is a technique to use a checkbox to provide a click view option on mobile.

NOTE: for the snippet to show the click working I have had to set the media query to a large resolution ( 1250 ) obviously you would put this lower in the live code.

Some things to take note of.

We now have a hidden checkbox, a label and spans with a for tag to activate the checkbox.

Use a media query, fullscreen to hide the label .

 nav { display: inline-block; background-color: blue; min-width: 50px; min-height: 25px; } nav .navCheck { display: none; } label[for="navCheck"] { display: none; } ul { display: none; color: #fff; } ul a, ul div a { text-decoration: none; color: white; } nav:hover ul { display: block; } @media screen and (max-width: 1250px) { label[for="navCheck"] { display: inline-block; width: 60px; height: 10px; } label[for="navCheck"] span { margin:2px; display: block; width: 50px; height: 2px; background-color: #fff; border: 1px solid #fff; border-radius: 7px; } input[class="navCheck"]:checked + ul { display: block; } } 

 <nav class="nav-main"> <label for="navCheck"> <span></span> <span></span> <span></span> </label> <input id="navCheck" type="checkbox" class="navCheck" /> <ul> <a href="index.html"> <li>Home</li> </a> <a href="index.html#main"> <li>About</li> </a> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Services</a> <div id="menu-box" class="dropdown-content"> <a href="index.html#main">Overview</a> <a href="index.html#main">General Practice</a> <a href="index.html#main">Sports Physicals</a> <a href="index.html#main">Weight Loss</a> </div> </li> <a href="index.html#main"> <li>Doctor's Daily Dose</li> </a> <a href="index.html#main"> <li>Contact</li> </a> </ul> </nav>