Адаптивное меню CSS выбирает неправильный элемент в мобильных браузерах

Question

Я использую ul с li для создания адаптивного меню навигации, используя только HTML и CSS. У меня есть основные списки, вложенные со скрытыми элементами в моем меню. «Подпункты» скрыты до тех пор, пока на мобильном телефоне не будет нажата главное меню.

Отображается и корректно работает в настольных браузерах. Он отображается правильно на мобильном телефоне, но есть проблема, когда отображается скрытое меню.

На мобильном устройстве браузер автоматически выбирает подпункт следующего меню, которое вы нажимаете, если вы просматривали предыдущее меню с меньшим количеством элементов, чем то, которое вы просматриваете в следующем.

Если вы нажмете на меню, в котором есть два подпункта, а в следующем меню более двух, браузер автоматически выберет второй элемент. Если в последнем меню было пять пунктов, пятый будет выбран в следующем меню, если в нем более пяти пунктов. Если в следующем нажатом меню меньше элементов, чем в предыдущем, ничего не будет выбрано.

Например, если вы используете предоставленный мною код и загружаете его на мобильный телефон, нажмите «Меню 1», в котором есть два элемента - при нажатии следующего меню будет неправильно выделен пункт 2.

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

Вот мой код:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

li {
  display: inline-block;
  float: left;
  margin-right: 0.3em;
}

li a {
  display: block;
  min-width: 130px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #FFF;
  background: #25241A;
  text-decoration: none;
}

li:hover a {
  background: #7FBF7F;
  color: #FFF;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

li:hover ul li a {
  background: #584D3B;
  color: #FFF;
  height: 40px;
  line-height: 40px;
  border: 1px solid #000;
  padding: 0.5em 0.8em 0.5em 4.0em;
  box-shadow: 5px 1px 12px #5E5E5E;
  -webkit-box-shadow: 5px 1px 12px #5E5E5E;
  -moz-box-shadow: 5px 1px 12px #5E5E5E;
  text-align: left;
}

li:hover ul li a:hover {
  background: #7FBF7F;
  color: #FFF;
}

li ul {
  display: none;
}

li ul li {
  display: block;
  float: none;
}

li ul li a {
  width: auto;
  min-width: 50px;
  padding: 0 1.5em;
}


/* Display the dropdown on hover */

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
  z-index: 999;
}


/* Hide checkbox */

input.hidden[type=checkbox] {
  display: none;
}


/* Show menu when hidden checkbox is checked */

input.hidden[type=checkbox]:checked~#menu,
#support-menu {
  display: block;
}

.show-menu {
  text-decoration: none;
  color: #B59B71;
  background: transparent;
  text-align: center;
  padding: 0;
  display: none;
  font-weight: bold;
  font-size: 1.8em;
  line-height: 50px;
  height: 50px;
}

#nav-top {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid #000;
  background-color: #25241A;
  box-shadow: 2px 4px 12px #888;
  -webkit-box-shadow: 2px 4px 12px #888;
  -moz-box-shadow: 2px 4px 12px #888;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table;
  height: 51px;
  content: '';
  clear: both;
}

@media (min-width: 700px) {
  #menu {
    font-size: 0.9em;
    margin-left: 0.5em;
  }
  ul li a {
    padding: 0em 0.2em;
    min-width: 105px;
    font-size: 0.9em;
    width: auto;
  }
  li:hover ul li a {
    padding: 0.5em 1.2em;
    min-width: 250px;
  }
}

@media (min-width: 1024px) {
  #menu {
    margin-left: 1.6em;
  }
  ul li a {
    padding: 0em 1.0em;
    min-width: 130px;
  }
}

@media screen and (max-width: 760px) {
  ul {
    position: static;
    display: none;
  }
  ul li,
  li a {
    width: 100%;
  }
  .show-menu {
    display: block;
  }
  #menu {
    margin: 0;
  }
}

<div id="nav-top">
  <label for="show-menu" class="show-menu"><b>&#9776;</b></label>
  <input class="hidden" type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="#"><b>Main 1</b></a>
      <ul class="hidden">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </li>
    <li><a href="#"><b>Main 2</b></a>
      <ul class="hidden">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
      </ul>
    </li>
    <li><a href="#"><b>Main 3</b></a>
      <ul class="hidden">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
      </ul>
    </li>
    <li><a href="#"><b>Main 4</b></a>
      <ul class="hidden">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
      </ul>
    </li>
    <li><a href="#"><b>Main 5</b></a>
      <ul class="hidden">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
      </ul>
    </li>
  </ul>
</div>

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

Есть идеи?

Спасибо.