懸停CSS菜單在iOS上不起作用

Question

這是我在我的出版公司網站上的菜單代碼。出於某種原因，下拉菜單（在發佈標籤中）僅適用於FAQ頁面，而不適用於其他任何頁面。如果有人能幫我找到一個解決方法，那就太好了。我的android手機上的一切都很好，所以我不確定問題是什麼。 （可能只需要一個手機網站，但我希望得到這個工作）

<div class="publishingmenu"><ul> 
    <li id="pm1" onclick="return true"> 
     <a class="plevel1" href="#">Submit a Manuscript</a> 
     <ul class="submenu" id="submitamanuscript"> 
     <li><a href="submissionguidelines.php">Submission Guidelines</a></li> 
     <li id="onlinesubmissionform"><a href="onlinesubmissionform.php">Online Submission Form</a></li></ul> 
    </li> 
    <li id="pm2" onclick="return true"> 
     <a class="plevel1" href="#">Publishing Packages</a> 
     <ul class="submenu" id="publishingpackages"> 
     <li class="inactive">Black & White</li> 
     <li><a href="softcoverpackages.php"><span class="tabbed">Softcover</span></a></li> 
     <li><a href="hardcoverpackages.php"><span class="tabbed">Hardcover</span></a></li> 
     <li><a href="combopackages.php"><span class="tabbed">Combination</span></a></li> 
     <li class="inactive">Color</li> 
     <li><a href="colorsoftcoverpackages.php"><span class="tabbed">Softcover</span></a></li> 
     <li><a href="colorhardcoverpackages.php"><span class="tabbed">Hardcover</span></a></li> 
     <li><a href="colorcombo.php"><span class="tabbed">Combination</span></a></li> 
     <li><a href="color.php"><span class="tabbed">Color Options</span></a></li> 
     <li><a href="ebookpackage.php">Ebook</a></li> 
     <li><a href="additionalservices.php">Additional Services</a></li> 
     <li><a href="marketing.php">Marketing</a></li><em></em> 
     <li><a href="self-publishing.php">Self-Publishing</a></li></ul> 
    </li> 
    <li id="pm3" onclick="return true"><a class="plevel1" href="#">Information</a> 
     <ul class="submenu" id="information"> 
     <li><a href="comparisonchart.php">Comparison Chart</a></li> 
     <li><a href="calcpage.php">Production Calculator</a></li> 
     <li><a href="layouttemplates.php">Layout Templates</a></li> 
     <li><a href="covertemplates.php">Cover Templates</a></li> 
     <li><a href="testimonials.php">Testimonials</a></li> 
     <li><a href="informationpackets.php">Information Packets</a></li> 
     <li><a href="podglossary.php">POD Glossary</a></li></ul> 
    </li> 
    <li id="pm4"><a class="plevel1" href="faqs.php">FAQS</a></li> 
    <li id="pm5"><a class="plevel1" href="sample.php">Printed Sample</a></li> 
    </ul> 
</div> 

這裏是CSS

  #publishbookguy{height:160px; width:139px; position:absolute; z-index:9; right:20px; top:25px;} 
    .publishingmenu ul{list-style:none; margin:-15px 0 0 10px; } 
    .publishingmenu li{display:inline;} 
     .publishingmenu a.plevel1{width:120px; height:50px; display:inline-block; text-indent:-9999px; 
     -moz-border-radius-bottomright:10px; border-bottom-right-radius:10px; 
     -moz-border-radius-bottomleft:10px; border-bottom-left-radius:10px; background-color:#f7a553; position:relative; z-index:10;} 
     #pm1 a.plevel1{background-image:url(images/publishingmenu.png); background-position: 0 0;} 
     #pm1 a.plevel1:hover{background-position: 0 -50px;} 
     #pm2 a.plevel1{background-image:url(images/publishingmenu.png); background-position:-120px 0;} 
     #pm2 a.plevel1:hover{background-position: -120px -50px;} 
     #pm3 a.plevel1{background-image:url(images/publishingmenu.png); background-position:-240px 0;} 
     #pm3 a.plevel1:hover{background-position: -240px -50px;} 
     #pm4 a.plevel1{background-image:url(images/publishingmenu.png); background-position:-360px 0;} 
     #pm4 a.plevel1:hover{background-position: -360px -50px;} 
     #pm4 a.plevel1:active{background-position: -360px -100px;} 
     #pm5 a.plevel1{background-image:url(images/publishingmenu.png); background-position:-480px 0;} 
     #pm5 a.plevel1:hover{background-position: -480px -50px;} 
     #pm5 a.plevel1:active{background-position: -480px -100px;} 
      /*Submenu*/ 
      .publishingmenu .submenu a{display:block; height:30px; width:200px; background:#f7a553; 
      text-indent:20px; line-height:30px; font-family: 'Caudex', arial, serif; color:#000000; 
      -moz-border-radius:5px; border-radius:5px; background-image:url(images/menuborders.png); font-size:14px; z-index:300;} 
       .publishingmenu .submenu a:link{text-decoration: none; color:#000000; background-position: 0 0;} 
       .publishingmenu .submenu a:visted{text-decoration: none; color:#000000; background-position: 0 0;} 
       .publishingmenu .submenu a:hover{text-decoration: none; color:#00588e; background-position: 0 -30px; font-weight:bold;} 
       .publishingmenu .submenu a:active{text-decoration: none; color:#0c94e0; ; background-position: 0 -60px;} 
      .publishingmenu ul.submenu{visibility:hidden; opacity:0; -webkit-transition: all .3s linear; position:absolute; z-index:300; margin-top:0px; padding-top:2px;} 
       ul#submitamanuscript{left:0px;} ul#submitamanuscript a{text-indent:10px;} 
       ul#publishingpackages{ left:85px;} 
       ul#information{left:210px;} 
      .publishingmenu li:hover ul, li.over ul, .publishingmenu li:active ul {visibility:visible; opacity:1;} 
      li.inactive{font-weight:bold; display:block; height:30px; width:200px; background:#f7a553; line-height:30px; background-image:url(images/menuborders.png); background-position: 0 0; text-indent:20px; font-family: 'Caudex', arial, serif; color:#000000; } 
      .tabbed{position:relative; left:20px;} 

Answer 1

這可能是罪魁禍首：

<li id="pm1" onclick="return true"> 

因爲您指定的是onclick行爲，所以iOS瀏覽器認爲它很重要，並選擇執行它而不是處理CSS懸停b ehaviour。刪除onclick可能會解決iOS上的問題（不知道爲什麼你把它放在那裏）。