Touch input opens dropdown / triggers links even when I tap next to them

33 viewscsshtml
0

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.

  1. 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.

  2. 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