Slight trouble with drop-down menu mouseout

[Hullabaloo]

Hello!

I'm one of those JS cut-and-pasters with only a basic idea of how the code actually works

So I have this drop-down menu #navbar. When users hover over it, the background color turns from white to black, and the text changes from black to white. When users mouse off the top <li> to the drop-down <ul><li>, I want the #navbar <li> background to remain black and the text to remain white. It turns back to black text on white background when users mouse off it to navigate the drop-down menu. I'm concerned that users might not realize the connection between the menu headers and their sub-items. I know this is a JS issue, but I'm having trouble fixing it.

Here is my a demo of my site. You can see the HTML and CSS here:

http://www.harrisonownbey.com

And here's the JS I'm using (along with regular jQuery).

$('#navbar > li').hover(function() {
$('> ul', this).toggle()
});
$('#navbar > li > ul > li').hover(function() {
$('> ul', this).toggle();
});

Any suggestions to make the #navbar <li> stay black-backgrounded and white-texted when its sub-menu drops down?

Thanks!

[pactor21]

Since the vertical drop-down unordered list items are still direct child elements #navbar, can't you just use CSS on them when hovered to solve the issue here?

Like

<style>
ul#naver > li
{
     color:white;
     background:black;
}
</style>

[Hullabaloo]

I tried the code below, but it didn't do anything.

ul#navbar > li hover {
color: #ffffff;
background-color: #000000;
}

I don't think this is a CSS issue as much as I think it is a JS issue. I want the top tab to stay black when users are mousing though the black and white submenu. How could I adjust that in the JS code?

Thanks for your help though.