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!