I'm having issues with my menu not working properly on iPads. At first, I thought the problem was with the transition property being set to 'all', but even after changing it to 'opacity', the issue persists. The specific problem is that the sub-menu items do not drop down on iPads when the parent 'li' element is a text separator, but they work fine if the parent 'li' is a link. It's strange because the dropdown event is triggered by hovering over the 'li' tag, not the 'a' tag. Any suggestions?
Here is the CSS:
#nav, #nav a {
color: #451803;
font-family: 'stbreock';
font-size: 24px;
text-shadow: 0 1px 1px #EBD8B3;
}
#nav a:hover {
text-shadow: 0 1px 1px #4D4D4D;
}
/* Additional CSS rules here */
And here is the HTML structure of the menu:
<div id="nav">
<!-- Menu structure goes here -->
</div>