jQuery Menu Button Disparaît sur le menu déroulant dans Webkit seulement, comment le faire rester?

Question

J'ai un problème concernant les listes déroulantes jQuery. Fondamentalement, le bouton qui révèle la baisse disparaît à la révélation de la baisse. Voici le code

Le code HTML inclus dans la navigation

<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> 

Ceci est le javascript générer le menu déroulant effet

$(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(" » "); 

});

Et c'est le CSS styling les boutons et menu déroulant ...

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; } 

Des conseils ou des réponses seront grandement appréciés, merci beaucoup pour votre temps :)

Answer 1

Le problème est que vous utilisez la classe pseudo hover de manière incorrecte. This link indique comment les utiliser correctement. Votre problème est ceci (du lien): Note: a: hover DOIT venir après un: lien et a: visité dans la définition CSS pour être efficace !! Donc, votre style de vol stationnaire ne se comporte pas correctement. Si vous ajoutez ces lignes (réglage comme désiré):

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

avant cette ligne:

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

il fonctionnera comme prévu.

Éditer: En outre, l'utilisation d'une classe nommée hover avec la pseudo-classe hover rend le css assez difficile à déchiffrer. Je donnerais à la classe que vous créez un nom différent si possible.