I made a simple dropdown menu which is triggered on hover. My problem is that on touch-devices, if I click on the lower part of the div (so that my touch is overlapping the hidden dropdown menu) the first link/element in the dropdown gets selected, and my browser navigates to that link.
on #dropDownMenu i have set height and opacity to 0 and display: none; and opposite upon hovering #menu (mainly the h4-tag)
#dropDownMenu {
position: relative;
bottom: -10px;
left: -10px;
width: 250px;
background-color: #555555;
height: 0;
overflow: hidden;
z-index: 99;
opacity: 0;
transition: opacity 0.3s;
}
#Menu:hover #dropDownMenu {
display: block;
height: auto;
opacity: 1;
}<div id="Menu">
<h4>Menu</h4>
<div id="dropDownMenu">
<ul>
<li><a href="/">Main</a>
</li>
<li><a href="/1">link1</a>
</li>
<li><a href="/2">link2</a>
</li>
</ul>
</div>
</div>It works great on a computer tho
