Keeping parent li as if hovered on submenu

Trying to get menu header with active color when submenu is opened

CSS:

#main-nav, #main-nav ul {
margin:0;
padding:0;
list-style:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#main-nav a:link, #main-nav a:active, #main-nav a:visited {
display:block;
padding:0px 5px;
color:#FFF;
text-decoration:none;
background:#03C;
}
#main-nav a:hover {
background:#CCC;
}
#main-nav li {
float:left;
position:relative;
}
#main-nav ul {
position:absolute;
width:12em;
top:auto;
display:none;
}
#main-nav li ul a {
border:1px solid #333;
border-top:0px;
width:12em;
float:left;
}
#main-nav ul ul {
top:auto;
}
#main-nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#main-nav li:hover ul ul, #main-nav li:hover ul ul ul, #main-nav li:hover ul ul ul ul {
display:none;
}
#main-nav li:hover ul, #main-nav li li:hover ul, #main-nav li li li:hover ul, #main-nav li li li li:hover ul {
display:block;
}

Jquery:

$(document).ready(function(){
$("#main-nav ul").css({display: "none"});
    $("#main-nav li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        $("ul").prev("ul").attr('style', 'background-color:#000');
    },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    });
    $("#main-nav li li a").hover(function(){
        $(this).parent("a").attr('style', 'background-color:#000');
    });
});

HTML/PHP

    <ul id="main-nav">
    <li><a href="<?=HOME;?>">Home</a></li>
    <li><a href="#">Browse</a>
        <ul>
            <li><a href="<?=SEARCH;?>" style="border-top:1px solid #333">Search</a></li>
            <li><a href="<?=ONLINE;?>">Who's Online</a></li>
        </ul>
            </li>
            <li><a href="#">Messages</a>
                <ul>
            <li><a href="<?=INBOX;?>" style="border-top:1px s开发者_JS百科olid #333">Inbox</a></li>
            <li><a href="<?=COMPOSE;?>">Compose</a></li>
            <li><a href="<?=SENT;?>">Sent</a></li>
            <li><a href="<?=TRASH;?>">Trash</a></li>
        </ul>
            </li>
            <li><a href="#">Favorites</a>
        <ul>
            <li><a href="<?=MYFAVS;?>" style="border-top:1px solid #333">My Favorites</a></li>
            <li><a href="<?=ONLINEFAVS;?>">Online Favorites</a></li>
            <li><a href="<?=WHOSFAVS;?>">Whose Favorite Am I?</a></li>
        </ul>
    </li>
    <li><a href="#">Account</a>
        <ul>
            <li><a href="<?=MYPROFILE.$uid;?>" style="border-top:1px solid #333">My Profile</a></li>
            <li><a href="<?=EDITPROFILE;?>">Edit Profile / Account Settings</a>        </li>
            <li><a href="#" id="uploadphoto">Upload Photo's</a></li>
        </ul>
    </li>
    <li><a href="#">Help</a>
        <ul>
            <li><a href="<?=CONTACT;?>" style="border-top:1px solid #333">Contact Us</a></li>
            <li><a href="<?=PRIVACY;?>">Privacy Policy</a></li>
            <li><a href="<?=TOS;?>">Terms of Service</a></li>
            <li><a href="<?=ABOUTUS;?>">About Us</a></li>
        </ul>
    </li>
    </ul>

---

I think this will do what you are looking for: jsfiddle