Как закрыть всплывающее меню CSS на мобильном

Question

Я пытаюсь создать веб-страницу, которая будет динамически работать с настольными компьютерами, планшетами и мобильными устройствами.Я сделал раскрывающееся меню только для CSS на основе селектора наведения (я думаю, что так оно и называется, я все еще новичок).Он отлично работает на настольном компьютере, он отлично отображается на мобильных устройствах, моя проблема в том, что выпадающее меню не будет скрываться на мобильном устройстве, когда с ним не взаимодействуют.Я понимаю, что hover не переводит волю на мобильные устройства, я надеялся, что, нажав на выпадающее меню, он снова скроется.

Я попытался воссоздать выпадающее меню с помощью кнопки инемного javascript, но попытка расположить элементы с помощью css стала беспорядком.Кажется, что только CSS-подход наименее сложен для стиля.Я открыт для идей, связанных с javascript.

PS, пожалуйста, простите за грязный CSS, я еще не убрал его.Это то, с чем я все еще учусь работать.

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

Раскрывающееся меню появится на мобильном телефоне, если вы нажмете пункт списка услуг.Он просто не исчезнет даже после нажатия на него, только если вы откроете другую ссылку или обновите страницу.Я надеялся, что его снятие будет действовать так же, как удаление курсора из точки зависания.Кажется, это не так.

Answer 1

Вот методика использования флажка для предоставления возможности просмотра по клику на мобильном телефоне.

ПРИМЕЧАНИЕ: чтобы фрагмент показывал работающий щелчок, мне нужно было установить для запроса media большое разрешение (1250), очевидно, вы бы поместили его ниже в живой код.

Некоторые вещи, на которые стоит обратить внимание.

Теперь у нас есть скрытый флажок, метка и интервалы с тегом for для активации флажка.

Используйте полноэкранный запрос media, чтобы скрыть 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>