jQuery菜單按鈕僅在webkit的下拉菜單中消失，如何讓它保持放置狀態？

我有一個涉及jQuery下拉的問題。基本上顯示下拉的按鈕揭示下拉消失。下面是jQuery菜單按鈕僅在webkit的下拉菜單中消失，如何讓它保持放置狀態？

的HTML包括在導航代碼

<div id="header"> 
<div id="navHolder"> 
     <ul style="list-style: none;"> 
     <li><a href="#" class="navBtn">Travel Blog</a></li> 
     <ul class="dropdown"> 
     <li><a href="#" class="navBtn">Destination</a> 
      <ul class="sub_menu"> 
       <li><a href="#">Item One</a></li> 
       <li><a href="#">Item Two</a></li> 
       <li><a href="#">Item Three</a></li> 
      </ul> 
     </li> 
     </ul> 
    <li><a href="#" class="navBtn">Map</a></li> 
    <li><a href="#" class="navBtn">About</a></li> 
    </ul> 
</div>

這是JavaScript生成下拉效果

$(function(){ 

var config = {  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    over: doOpen, // function = onMouseOver callback (REQUIRED)  
    timeout: 200, // number = milliseconds delay before onMouseOut  
    out: doClose // function = onMouseOut callback (REQUIRED)  
}; 

function doOpen() { 
    $(this).addClass("hover"); 
    $('ul:first',this).css('visibility', 'visible'); 
} 

function doClose() { 
    $(this).removeClass("hover"); 
    $('ul:first',this).css('visibility', 'hidden'); 
} 

$("ul.dropdown li").hoverIntent(config); 

$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

}）;

這是CSS樣式的按鈕和下拉...

ul.dropdown       { position: relative; list-style: none;} 
ul.dropdown li      { font-weight: bold; list-style: none; zoom: 1;} 
ul.dropdown a:hover     { color: #CCC; } 
ul.dropdown a:active    { color: #FFF; } 
ul.dropdown li a     { display: block; color: #FFF;} 
ul.dropdown li:last-child a   { border-right: none; } /* Doesn't work in IE */ 
ul.dropdown li.hover, 
ul.dropdown li:hover    { color: #CCC; position: relative; } 
ul.dropdown li.hover a    { color: #FFF; text-decoration: none;} 
ul.dropdown ul      { width: 180px; background: url(images/transBlack_bg2.png) repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; visibility: hidden; position: absolute; top: 45px; right: 60px; } 
ul.dropdown ul li     { font-weight: bold; font-size: 13px; color: #FFF; padding: 5px;} 
ul.dropdown ul li a     { width: auto; display: inline-block; } 
ul.dropdown ul li a:hover   { color: #111;} 
ul.dropdown ul ul     { left: 100%; top: 0; } 
ul.dropdown li:hover > ul   { visibility: visible; }

任何意見或答案，將不勝感激，非常感謝您的時間:)

來源

2010-01-25 Charlie Ryan

問題是你錯誤地使用僞懸浮類。 This link指定如何正確使用它們。你的問題是這樣的（來自鏈接）：注意：a：懸停必須出現在CSS定義中的a：鏈接和a：visited之後才能生效！所以你的懸停風格不正確。此行之前

ul.dropdown li.hover a:link {color:#999} 
ul.dropdown li.hover a:visited {color:#999}

：如果添加這些行（調整爲所需）

ul.dropdown li.hover a    { color: #FFF; text-decoration: none;}

它會正常工作。

編輯另外，使用hover類和hover僞類一起使用css很難破譯。如果可能的話，我會給班級創建一個不同的名字。

來源

2010-01-25 18:41:07 rosscj2533

不行，儘管感謝幫助:) 最後我發現它已經下降到一個流浪的浮法......這是使內容顯示在頁面之外......花了很長時間找到，但它現在完成，感謝您的知識，這是非常有益的，我並不知道之前（我只有18大聲笑）謝謝 – 2010-01-26 09:43:42

jQuery菜單按鈕僅在webkit的下拉菜單中消失，如何讓它保持放置狀態？

回答

相關問題