How to make a mobile html menu work on iOS devices - html

Question

I really don't know what should be the correct title for this question, but I have a custom menu I have created and using JQuery to toggle, it looks like this.
<ul class="menu">
<li class="user-info">
<span class="fa fa-user"></span>
<a class="inline" href="https://example.com/">account</a>
<ul class="items">
<li class="item">
<span class="fa fa-lock"></span>
<a class="inline" href="https://example.com/register">Create Account</a>
</li>
<li class="item">
<span class="fa fa-login"></span>
<a class="inline" href="https://example.com/login">Account Login</a>
</li>
</ul>
</li>
</ul>
And here is my CSS code
ul, ul li, ol, ol li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#media (max-width: 540px) {
#sidebar ul.menu {
height: auto!important;
}
}
#sidebar .menu {
height: calc(100vh - 94px);
overflow: auto;
transition: 200ms ease-out height;
}
#media (max-width: 540px) {
#sidebar ul.menu li {
width: 20%;
float: left;
margin: 0!important;
text-align: center;
padding: 10px 5px;
z-index: 111;
height: 50px;
}
}
#sidebar ul li {
font-weight: 400;
font-size: 10pt;
text-transform: capitalize;
position: relative;
cursor: pointer;
}
#media (max-width: 540px) {
#sidebar ul.menu li ul {
background: #222629;
border-bottom: 1px solid rgb(255 255 255 / 08%);
right: 0;
left: 0;
bottom: 50px;
top: 0;
position: fixed!important;
display: block;
opacity: 0;
visibility: hidden;
transition: 200ms ease-in all;
overflow: auto;
width: 100%;
box-shadow: none;
}
}
#sidebar ul.menu li ul {
background: #222629;
}
#media (max-width: 540px) {
#sidebar ul.menu li.shown ul {
opacity: 1;
visibility: visible;
display: block!important;
}
}
So far everything works well on all platforms except iOS although, I haven't tried on MAC, but I've tested across over 5 iOS devices including iOS 14.1 but the menu wont toggle when the .shown class is appended to the li.user-info item.
What am I doing wrongly?
EDIT:
I have updated my css to include this at the top:
#sidebar ul.menu li.shown ul {
opacity: 0;
visibility: hidden;
display: none;
}
Still doesn't work, I have also set opacity:1 and visibility:visible and display:block in the above piece of code, still, nothing worked.
Update: There is no element with a .menu_wrapper class, there was a typo, I mistakenley copied css from my old code for this question, I had to come up with simpler naming conventions to aid debugging.