0

当我将鼠标悬停在付款人应用程序菜单上并尝试单击子菜单中的一项时，子菜单会在每一页上的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;
}

请问有人对此有什么想法吗？

4

1 回答 1

0

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项目焦点的情况下越过间隙。

于 2012-04-06T20:22:13.960 回答