I have implemented a hoverable dropdown menu just as this example from w3schools:
https://www.w3schools.com/howto/howto_css_dropdown.asp
On my PC it works perfectly, but I tried the page on an iPhone with iOS 12.1.2 and the menu is shown, but it doesn't go away when I touch something outside of the menu even if it's the button that opened the menu. It was tested on Safari Mobile and Chrome for iOS.
I attempted this implementation, but nothing changed:
Mobile dropdown menu won't go away
My structure is something like this:
<div class="mobile__nav-wrapper>
<button type="button" class="mobile__nav-button"></button>
<div class="mobile__nav-content">
<a href="home">Home</a>
<a href="page">Page</a>
</div>
</div>
And I've tried that implementation like this (index.gif=tested.gif):
<div class="mobile__nav-wrapper>
<button type="button" class="mobile__nav-button"></button>
<div class="mobile__nav-content">
<a href="home">Home</a>
<a href="page">Page</a>
</div>
<img class="close" src="img/index.gif" />
</div>
This is my CSS:
.mobile__nav-wrapper{
display: inline-block;
position: absolute;
top:1.6em;
right: 0.2em;
font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
0% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
25% {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
50% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
75% {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
0% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
25% {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
50% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
75% {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
font-size: 1rem;
border: none;
outline: none;
color: #575757;
padding: 0.50em 0.70em;
background-color: rgba(244,244,244,0.95);
font-family: inherit;
margin: 0;
border-radius: 3px;
-webkit-animation-name: mobile__nav__btn-animation;
animation-name: mobile__nav__btn-animation;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mobile__nav-content{
display: none;
position: absolute;
right: 0;
background-color: rgba(255,255,255,0.8);
-webkit-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
line-height: 2em;
font-size: 1.3em;
}
.mobile__nav-content a{
color: #575757;
background-color: rgba(255,255,255,0.8);
text-decoration:none;
display: block;
padding-left: 0.5em;
margin-left: -100vw;
}
.mobile__nav-content a:hover{
background-color: rgba(163,183,108,0.85);
}
/*--------for the safari mobile browser----------*/
div img.close {
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
div .mobile__nav-wraper:hover + img {
display: block;
}
/*-------end of the safari mobile browser----------*/
.mobile__nav-wrapper:hover .mobile__nav-content{
display: block;
}
How can I achieve this without using JS? Or it's strictly necessary?
-----UPDATE---- As it was asked by Viira, here is a JSFiddle:
