Question

当我将鼠标悬停在付款人应用程序菜单上并尝试单击子菜单中的某个项目时，子菜单会在每个页面的http://curo.creativedynamite.co.uk处消失。

我正在运行Max OS 10.7，它适用于我的Chrome，Firefox和Safari，但它不适用于运行Snow Leopard（OS 10.6）的朋友。

我一直试图找出原因，起初我认为这是由于Slider和标题图片以及我使用的CSS定位：

<div id="navigation" class="clearfix">
        <div class="menu-main-menu-container"><ul><li><li id="menu-item-212" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-212"><a href="/">Home</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://curo.creativedynamite.co.uk/our-approach">Our Approach</a></li>
<li id="menu-item-592" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-592"><a href="#">Payer Apps</a>
<ul class="sub-menu">
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://curo.creativedynamite.co.uk/payer-apps/payerlogic">PayerLogic</a></li>
    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://curo.creativedynamite.co.uk/payer-apps/accessaccelerator">AccessAccelerator</a></li>
    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://curo.creativedynamite.co.uk/payer-apps/charisma">CharismA</a></li>
    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://curo.creativedynamite.co.uk/payer-apps/r3tracker">R3Tracker</a></li>
    <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://curo.creativedynamite.co.uk/payer-apps/prescriberlogic">PrescriberLogic</a></li>
</ul>
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://curo.creativedynamite.co.uk/about-us">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://curo.creativedynamite.co.uk/careers">Careers</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://curo.creativedynamite.co.uk/blog">Blog</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://curo.creativedynamite.co.uk/news">News</a></li>
</li></ul></div>    </div><!-- navigation -->

/* Navigation */
#navigation { min-height:30px; height:60px; margin-left:-20px; }
    #navigation ul { list-style-type:none; text-align:center; padding:20px 0 0 0;}
        #navigation ul li { list-style-image:none; padding:0.2em 1.8em; /* 0.3 1.3 with 7 menu options*/ font-size:1.3em; float:left; }
        #navigation ul li a { color:#9d9fa0; padding:6px 10px; }
            #navigation ul li a:hover { background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff; text-decoration:none; padding:6px 10px; }
                #navigation .current_page_item a { background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff; padding:6px 10px; }

                    #navigation .current_page_item a, .current_page_item a:hover, .current_page_item a:visited { color:#fff; }

/* Navigation - Drop down menu 
#navigation li ul.sub-menu li { position:absolute; left:-999em; height:auto; width:190px; font-weight:normal; margin:0; line-height:1; border-top:1px solid #cccccc; }*/

#navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top:9em;
    left: 55.6  em;
    width: 168px;
    z-index: 99999;
    background-color:#fff;
}
#navigation ul ul li {
    padding:0 0em;
}

#navigation ul ul ul {
    left: 100%;
    top: 0;
}
#navigation ul ul li a {
    color:#9d9fa0;
    font-size:14px; 
    font-weight: bold;
    height: auto;
    line-height: 0em;
    padding: 10px 10px;
    width: 175px;
}
#navigation ul ul :hover > a {
    background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation .current-menu-item > a,
#navigation .current-menu-ancestor > a,
#navigation .current_page_item > a,
#navigation .current_page_ancestor > a {
    font-weight: bold;
}

有人对此有任何想法吗？

Answer 1

从此处删除top:9em; ...

#navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top:9em; 
    left: 55.6  em;
    width: 168px;
    z-index: 99999;
    background-color:#fff;
}

将子菜单放回可触及菜单按钮底边的位置，该按钮允许鼠标进入其中。菜单按钮和子菜单抽屉之间的差距导致了您的问题，因为鼠标无法跨越间隙而不会失去:hover项目的焦点。

子菜单在Mac OS 10.6上的Chrome，Safari和Firefox中消失

1 个答案: