CSS based Dropdown not showing iOS devices

Question

I have drop down menu for a website that works great on desktop browser but does not work on iPad or iPhone devices. However it does work on but works on android devices. I have a similar site with the same navigational structure and it works perfectly on that site.

The URL is www.aiimconference.org. And here is a sample of the nav structure and CSS. Also here is the site that work perfect. I have been using the same exact 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 can't confirm this but I suspect if instead of using left positioning to hide the dropdown navigation you instead use

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

to hide it and

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

to show it, it should work with mobile safari and mobile chrome.

Answer 2

As far as I know, you shouldn't use "hover" CSS selector on mobile devices, because that is triggered by the cursor, which you don't have, since you have no mouse either. You could try tap and hold, but I'm not sure of that.

A better way to deal with that, is using media queries to display and make it act in a certain way only on mobile devices. I recommend you to either trigger the dropdown by clicking the parent item, or to display the menu differently (with the submenu already opened or something like that).