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悬停行为。删除onclick可能会解决iOS上的问题（不知道为什么要把它放在那里）。

Hover CSS菜单在iOS上不起作用

1 个答案: