I'm facing an issue with my dropdown menu that appears when an image is clicked. Below is the relevant HTML code snippet:
<div class="menu">
<img id="menu_img" src="https://res.cloudinary.com/dqn5eqmwt/image/upload/v1493014197/Menu_jwzusk.svg">
<div id="myDropdown" class="dropdown-content">
<a id="Edprof">Edit Profile</a>
<a id="Deprof">Delete Profile</a>
<a id="Chistory">Check History</a>
<a id="Bevents">Book Events</a>
<a id="Getout">Logout</a>
</div>
</div>
This CSS controls the styling of the entire menu:
.menu {
display: block;
position: absolute;
z-index: 2;
height:55px; /* 150/640 */
width:55px;/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}
#menu_img{
width:55px;
height:55px;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #7de88a;
border: 6px solid #7de88a;
border-radius: 10px;
width: 300%;
right: 0px;
left: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
cursor: pointer;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #c43396;
background-color: #fff3bb;
font-family: Chewy;
border: 6px solid #7de88a;
border-radius: 10px;
margin-top: 2.5px;
margin-bottom: 2.5px;
padding: 12px 16px;
display: block;
}
And here's the JS code snippet for handling the onclick event of the image:
$(function(){
$('#menu_img').on('click touch',function() {
document.getElementById("myDropdown").style="display:block";
})
});
The issue I'm experiencing is specific to iPhones. The background color changes on click as if it were a hover action, but the dropdown menu does not appear. I have attempted several checks suggested online, such as adding 'cursor:pointer' to menu_img in CSS and testing different event trigger combinations in the JS code. Unfortunately, none of these solutions have worked so far. Any assistance or suggestions would be greatly appreciated. Thank you!