Hover Not Working On Ipad HTML/CSS

Question

I realise there are a number of questions / answers referring to HOVER not working on iPad but I think my problem is slightly different.

My problem is that the HOVER works fine on desktop and only part works on the iPad (touch devices). What I mean by that is that if I touch one of the lists on the NAV bar on iPad it works fine but if I choose another list on the NAV bar it does not work - (I have inconsistent behaviour)

I am using CSS / HTML (cannot program in jquery)

So on APPLE devices if I touch the STEAM TOURS part of the NAV the drop down appears fine. Same for LUXURY TOURS. But will not work for GENERAL or ENTHUSIASTS TOURS. However it all works on the desktop as expected and it works on my Android phone

Here is my HTML

<div class="topbox">
<a href="index.php">Railwide.co.uk</a>
</div>
<div class="dropdown"> 
<ul> 
 <li><a href="index.php" style="font-family:sans-serif;font-size:17px;font-weight:bold; color:white;">Rail Tour Guide</a></li> 
 <li><a>Steam Rail Tours</a> 
  <ul> 
   <li><a href="steam-railtours-all.php">All Rail Tours</a></li> 
   <li><a href="steam-railtours-london.php">Pick Up - London</a></li>  
   <li><a href="steam-railtours-wales.php">Pick Up - Wales & Borders</a></li> 
   <li><a href="steam-railtours-sw.php">Pick Up - South West</a></li> 
   <li><a href="steam-railtours-se.php">Pick Up - South East</a></li> 
   <li><a href="steam-railtours-midlands.php">Pick Up - Midlands</a></li> 
   <li><a href="steam-railtours-yorkshire.php">Pick Up - Yorkshire</a></li> 
   <li><a href="steam-railtours-centralsouthern.php">Pick Up - Central Southern</a></li> 
   <li><a href="steam-railtours-eastanglia.php">Pick Up - East Anglia</a></li> 
   <li><a href="steam-railtours-nw.php">Pick Up - North West</a></li>
   <li><a href="steam-railtours-ne.php">Pick Up - North East</a></li> 
   <li><a href="steam-railtours-scotland.php">Pick Up - Scotland</a></li> 
   <li><a href="vsoe-steam-railtours.php">British Pullman (VSOE)</a></li> 
  </ul> 
 </li> 
 <li><a>Luxury Tours</a> 
  <ul> 
   <li><a href="luxury-railtours.php">All Rail Tours</a></li> 
   <li><a href="luxury-railtours-london.php">Pick Up - London</a></li> 
   <li><a href="luxury-railtours-wales.php">Pick Up - Wales & Borders</a></li> 
   <li><a href="luxury-railtours-sw.php">Pick Up - South West</a></li> 
   <li><a href="luxury-railtours-se.php">Pick Up - South East</a></li> 
   <li><a href="luxury-railtours-midlands.php">Pick Up - Midlands</a></li> 
   <li><a href="luxury-railtours-yorkshire.php">Pick Up - Yorkshire</a></li>
   <li><a href="luxury-railtours-centralsouthern.php">Pick Up - Central Southern</a></li>
   <li><a href="luxury-railtours-eastanglia.php">Pick Up - East Anglia</a></li> 
   <li><a href="luxury-railtours-nw.php">Pick Up - North West</a></li>
   <li><a href="luxury-railtours-ne.php">Pick Up - North East</a></li> 
   <li><a href="luxury-railtours-scotland.php">Pick Up - Scotland</a></li> 
   <li><a href="British-Pullman-luxury-railtours.php">British Pullman (VSOE)</a></li>
   <li><a href="Northern-Belle-luxury-railtours.php">Northern Belle (VSOE)</a></li>
  </ul> 
  </li> 
  <li><a>Enthusiasts Tours</a> 
  <ul> 
   <li><a href="rail-enthusiast-luxury-railtours.php">All Rail Tours</a></li> 
  </ul> 
  </li>  
  <li><a>General</a>
  <ul> 
   <li><a href="links.php">Links</a></li> 
   <li><a href="northernbelle.php">Northern Belle</a></li> 
   <li><a href="britishpullman.php">British Pullman</a></li> 
   <li><a href="accomadation.php">Rail Accomadation</a></li> 
   <li><a href="drs68002.php">DRS 68002</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 

Here is the CSS

     /* Navigation Style */ 
    .dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:35px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; } 

    /* Basic List Styling (First/Base Level) */ 
    .dropdown ul {padding:0; margin:0; list-style: none;} 
    .dropdown ul li {float:left; position:relative;} 
    .dropdown ul li a { border-right:1px solid #666666; padding:0px 8px 0px 8px;line-height:35px;display:block; text-decoration:none; color:#000; text-align:center; color:#fff;} 
    .dropdown ul li a:hover {color:#ffffff; background:#232323;} 

    /* Second Level Drop Down Menu */ 
    .dropdown ul li ul {display: none;} 
    .dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; border-top:1px solid #666666; top:35px; min-width:150px; left:0;} 
    .dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; } 
    .dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;} 

    /* Third Level Drop Down Menu */ 
    .dropdown ul li:hover ul li ul {display: none;} 
    .dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; } 

    #container {
    overflow:hidden;
    background:#F8ECC2;
    width:1000px;
    padding 0px 0px 0px 0px;
    margin: 0 auto;
    }

    .topbox {
    background:#FFFFFF;
    height:60px;
    }

    .topbox a {
    color:black;
    text-decoration:none;
    margin-left:20px;
    font-size:25px;
    font-family:'Rock Salt';
    }

Here is a jsfiddle

http://jsfiddle.net/ZQgm4/

Answer 1

Since hover does not work on mobile devices (unless you are using one that has a digital pen) you could try and play with the :active selector (a:active, nav:active, etc) which will trigger when the user has it's finger over your targetted element.