Проблема с двойным нажатием на мобильном устройстве ⇐ CSS

[Anonymous]

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

Код: Выделить всё

[b]{{ user.username }} [i][/i][/b]

[list]
[*][url={% url ]{% "Account" %}[/url]
[*][url={% url ] {% "Orders " %}[/url]
[*][url={% url ] {% "Logout" %}[/url]
[/list]

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 (указатель: отлично) {}, но раскрывающийся список всегда виден.
Заранее спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/729 ... -tap-issue