0

支払者アプリメニューにカーソルを合わせてサブメニューの項目の1つをクリックしようとすると、すべてのページのhttp://curo.creativedynamite.co.ukにサブメニューが表示されなくなります。

Max OS 10.7を実行していて、Chrome、Firefox、Safariで動作しますが、Snow Leopard（OS 10.6）を実行している友人には動作しません。

私はこれがなぜであるかを理解しようとしてきました。最初は、スライダーとヘッダー画像、および使用していた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 に答える