How to keep all the parent except the first LI highlighted when the sub LI is hovered over

Question

HTML:

    

        Software Update
        

           


        

Answer 1

You should just change your .active rule to apply to all li elements that are hovered.

ul.ulSubMenu li:hover,
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

This should work as you want because when you hover over an element, all its parents are hovered as well.

Answer 2

I updated my CSS to the following:

ul.ulSubMenu > li > a {
    text-decoration: none;
    background-color: #C5F3FF;
    border: 1px solid #53E1FF;
    border-top: none;
    color: #008AAC;
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 12px;
    cursor: pointer;
}

ul.ulSubMenu > li:hover
{
    background-color: #008AAC;
    color: #C5F3FF;
}
ul.ulSubMenu > li:hover > a
{
    color: #C5F3FF;
    background-color: #008AAC;
}