I created a website with a div that displays a dropdown on hover. I’m now trying to make it mobile friendly, but I ran into two issues when I use a touch screen instead of a mouse.
-
Even if I touch next to the div it still acts like I tapped it and it displays the dropdown. I does that for all my links. I checked all the element boxes in web dev mode and I’m 100% that it’s outside of them. Moreover, it is pixel perfect when I use a mouse.
-
When the dropdown is displayed by tapping under the dive, it automatically selects the first element of the dropdown and triggers the link to the page. When I see it, it looks like the dropdown is displayed and a fraction of a second after the first element (where I tapped) is also tapped.
I tried googling it, but I’m either not using the correct keywords or it’s an error specifics to what I did.
I read about stopping propagation, but that seems to be related to JS, and this issue is only related to HTML and CSS. I also tried adding :active after :hover, but I get the exact same behavior.
The dropdown is set to display: none and it changes to display: block when I hover over the div. Here is my css:
.dropdown {
position: relative;
display: inline-block;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #EFEFEF;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: left;
top: 0.7rem;
}
.dropdownContent a {
padding: 0.2rem 0.2rem;
text-decoration: none;
display: block;
color: #112B3C;
margin-left: 0px;
margin-right: 0px;
font-size: 0.5rem;
}
.dropdown:hover .dropdownContent {
display: block;}
.dropdownContent a:hover {
background-color: #205375;
transition: background 0.3s ease-in-out;
color: #EFEFEF;
}
and here is my html:
<div class="colonne dropdown">
<a><?= displayText("Menu") ?></a>
<div class="dropdownContent">
<a href='/page1'>page 1</a>
<a href='/page2'>page 2</a>
<a href='/page3'>page 3</a>
</div>
</div>
Any help / pointers in the right direction would be really appreciated.
Thank you