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

當我將鼠標懸停在付款人應用程序菜單上並嘗試點擊子菜單中的某個項時，子菜單在每個頁面上的http://curo.creativedynamite.co.uk消失。子菜單在Mac OS上的Chrome，Safari和Firefox中消失10.6

我運行的是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; 
}

有沒有人有任何的想法這個好嗎？

來源

2012-04-06 user1317986

沒有很好的理由說明它可以在一個操作系統中工作，而不是另一個。通常，瀏覽器品牌與操作系統之間會出現渲染問題。您的HTML代碼是否正確驗證？你有任何控制檯錯誤？ – Sparky 2012-04-06 18:34:49

你已經用HTML標記了你的問題，但沒有HTML代碼。您提到過_「付款人應用程序，滑塊和標題圖片」_但不提供演示或鏈接。請[閱讀本頁]（http://sscce.org/）並解決您的問題......我們不是讀者。 – Sparky 2012-04-06 18:45:32

對不起，Sparky672我根據該頁面對其進行了編輯。 – user1317986 2012-04-06 19:26:17

取下這個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-06 20:22:13 Sparky

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

回答

相關問題