jQuery Menu Button Disappearing on drop down in webkit only, how do I make it stay put?

Question

I have a problem involving jQuery drop downs. Basically the button which reveals the drop down dissapears upon revealing the drop down. Here is the code

The HTML included in the 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>

This is the javascript generating the drop down effect

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

});

And this is the CSS styling the buttons and drop down...

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

Any advice or answers will be greatly appreciated, thanks very much for your time :)

Answer 1

The problem is you are using the pseudo hover class incorrectly. This link specifies how to use them properly. Your problem is this (from link): Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! So your hover style is not behaving correctly. If you add these lines (adjusting as desired):

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

before this line:

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

it will work as expected.

Edit: Also, using a class named hover along with the hover pseudo class makes the css pretty hard to decipher. I'd give the class you create a different name if possible.