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

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