CSS based breakdown not showing iOS devices

Question

I have a drop down menu for a website that works fine on a desktop browser but doesn't work on an iPad or iPhone. However, it works, but works on Android devices. I have a similar site with the same navigation structure, and it works great on this site.

URL: www.aiimconference.org. And here is a sample navigation structure and CSS. Also here is a site that works perfectly. I use the exact same structure on this site. www.aiim.org.

<ul> <li><a href="/conference">Home</a></il> <li class="expandable"><a href="/conference">Program</a> <ul> <li class="expandable"><a href="/conference">Program</a></il> <li class="expandable"><a href="/conference">Program</a></il> </ul> </il> <li class="expandable"><a href="/conference">Connect</a></il> <li class="expandable"><a href="/conference">Register</a></il> <li class="expandable"><a href="/conference">Sponsors</a></il> <li class="expandable"><a href="/conference">Venue</a></il> </ul> .mainNav li.expandable > a /* dropdown */{ background: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/dropdown.jpg") no-repeat center right; padding-right: 16px; padding-bottom: 4px;} .mainNav ul li.expandable li.expandable > a /* flyout */ { background-image: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/flyout.png") !important; background-repeat: no-repeat; background-position: 95% 50%; . mainNav{ margin: 0 auto; text-align: center; background: #007287 url(/assets/sites/aiimconference/www/conf2013/images/layout/main- nav-bkgd.jpg) repeat-x bottom; font-family: franklin-gothic-urw-condensed, arial, sans-serif; font-size: 20px; line-height: 20px; text-transform: uppercase; margin-top: 30px; .mainNav ul ul li:hover > a { background-color:#006372;} .mainNav span { display:block; position:absolute; right:9999px; top:-35px;} .mainNav ul li:hover > ul { left:-1px; top:30px; z-index:-1;} .mainNav ul ul li:hover > ul { left:100%; top:auto; margin-top:-31px; /*margin-left:-10px;*/ z-index:10;} 

Answer 1

I cannot confirm this, but I suspect that instead of using left-handed positioning to hide the drop-down navigation, use instead

 visibility: hidden; height: 0; opacity: 0; 

to hide it and

 visibility: visible; height: auto; opacity: 1; 

to show it, he must work with mobile safari and mobile chrome.

Answer 2

As far as I know, you should not use the CSS "hover" selector on mobile devices because it is caused by a cursor that you don't have, since you don't have a mouse. You can try to press and hold, but I'm not sure about that.

The best way to handle this is to use media queries to display and make it act in a certain way only on mobile devices. I recommend that you either call the drop-down list by clicking on the parent element, or display the menu in different ways (with a submenu already open or something like that).