jQuery Menü-Schaltfläche verschwindet auf Dropdown in Webkit nur, wie mache ich es bleiben?

Question

Ich habe ein Problem mit jQuery Dropdowns. Grundsätzlich die Schaltfläche, die das Dropdown offenbart verschwindet nach dem Aufdecken des Dropdowns. Hier ist der Code

Der in der Navigation enthaltene HTML-Code

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

Dies ist das Javascript, das den Dropdown-Effekt erzeugt

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

});

Und das ist das CSS-Styling der Schaltflächen und des Dropdowns...

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

Für jeden Ratschlag oder jede Antwort wären wir Ihnen sehr dankbar, vielen Dank für Ihre Zeit :)

Answer 1

Das Problem ist, dass Sie die Pseudo-Hover-Klasse falsch verwenden. Dieser Link gibt an, wie man sie richtig einsetzt. Ihr Problem ist folgendes (aus dem Link): Hinweis: a:hover MUSS in der CSS-Definition nach a:link und a:visited stehen, um wirksam zu sein!!! Ihr Hover-Stil verhält sich also nicht korrekt. Fügen Sie diese Zeilen hinzu (und passen Sie sie wie gewünscht an):

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

vor dieser Zeile:

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

wird es wie erwartet funktionieren.

Bearbeiten: Außerdem macht die Verwendung einer Klasse namens hover zusammen mit der Pseudoklasse hover das CSS ziemlich schwer zu entziffern. Ich würde die Klasse, die Sie erstellen einen anderen Namen geben, wenn möglich.