Проблема двойного нажатия в мобильном телефоне

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

html код:

<div class="dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="true">
                <strong class="text-uppercase">{{ user.username }} <i class="fa fa-caret-down"></i></strong>
              </div>
<ul class="custom-menu">
              <li><a href="{% url 'account' %}">{% "Account" %}</a></li>
              <li><a href="{% url 'orders' %}"></i> {% "Orders " %}</a></li>
              <li><a href="{% url 'logout' %}"> {% "Logout" %}</a></li>
            </ul>

css код:

.custom-menu {
  position: absolute;
  padding: 15px;
  background: #FFF;
  -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 100;
  top: 100%;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}
.dropdown.open>.custom-menu {
  opacity: 1;
  visibility: visible;
}

Это работает на настольном компьютере, но на мобильном требуется двойной тап. Я пробовал использовать @media (pointer: fine) {}, но это делает выпадающий список всегда видимым.

Заранее благодарю за помощь!

Вернуться на верх