css3 - Hover CSS menu does not work on iOS -

this code have menu on publishing company's site. reason drop down menu (in publishing tab) works on faq page, not on other page. if me find workaround, great. works great on android phone, i'm not sure problem is. (might need mobile site, i'd work)

<div class="publishingmenu"><ul>     <li id="pm1" onclick="return true">         <a class="plevel1" href="#">submit 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> 

and here 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: .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;} 

this culprit:

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

because specifying onclick behaviour, ios browser thinks important, , elects execute instead of handling css hover behaviour. removing onclick solve issue on ios (not sure why put there anyway).