悬停在 Ipad HTML/CSS 上不起作用

Question

我知道有很多问题/答案是指 HOVER 无法在 iPad 上运行，但我认为我的问题略有不同。

我的问题是 HOVER 在桌面上运行良好，只有部分在 iPad（触摸设备）上运行。我的意思是，如果我在 iPad 上触摸 NAV 栏上的一个列表，它可以正常工作，但如果我在 NAV 栏上选择另一个列表，它就不起作用 - （我的行为不一致）

我正在使用 CSS / HTML（无法在 jquery 中编程）

所以在 APPLE 设备上，如果我触摸 NAV 的 STEAM TOURS 部分，下拉菜单会显示得很好。豪华旅游也是如此。但不适用于 GENERAL 或 ENTHUSIASTS TOURS。但是，这一切都可以按预期在桌面上运行，并且可以在我的 Android 手机上运行

这是我的 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> 

这里是 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';
    }

这是一个 jsfiddle

http://jsfiddle.net/ZQgm4/

Answer 1

由于悬停在移动设备上不起作用（除非您使用的是带有数字笔的设备），您可以尝试使用 :active 选择器（a:active、nav:active 等） ) 这将在用户将手指放在您的目标元素上时触发。