Parent li in dropdown not changing color off hover

Question

I have an <li> that on hover shows a <ul> beneath it. I finally got the borders aligned but now for some reason the li:hover color won't change back when I hover off of it. What seems to be happening is that when the <ul> is active the parent <li> remains hovered according to CSS.

Here's a jsFiddle showing what's going on:

http://jsfiddle.net/Luryf/

When the <ul> is showing and the parent <li> isn't being hovered over, I'd like the parent <li> to have the same background color and border color of the <li> elements within the <ul>. How can I best fix this while maintaining the border integrity of the entire <div>?

Answer 1

If you are not opposed to using some jQuery, you could do this

$('ul#children').hover(
   function(){
       $(this).parent('li').css('background-color','#CCD9FF');
    },   
    function(){
        $(this).parent('li').css('background-color','');
    } 
);

Example: http://jsfiddle.net/Luryf/1/

Answer 2

You could by changing

#nav li#parent:hover {

to

#nav li#parent a:hover {

Also you could then put:

#nav li#parent:hover {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

To keep it looking consistent. http://jsfiddle.net/Luryf/4/

update: whoops. Seems also needed to move the border-* and border-radius-* into its own. (from parent to parent a) http://jsfiddle.net/Luryf/8/

from:

#nav li#parent{
    background-color:#FFF;
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover{
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

to:

#nav li#parent {
    background-color:#FFF;
}
#nav li#parent a {
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover a {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

Answer 3

How's this: jsfiddle

I made it so the #parent li didn't wrap around the ul, changed some css, most importantly, this one:

#nav li:hover + ul, #nav ul ul:hover {
    display:block;
    z-index:100;
}

update

and added this:

#nav li, #nav ul:hover #parent {
    background-color:#CCD9FF;
}

#nav ul:hover #parent {
border-left: 1px solid #99B3FF;
border-right: 1px solid #99B3FF;
    border-top: 1px solid #99B3FF;
}

Before

#nav li#parent:hover { ... }