Dropdown Menu - Hover Effect

[EternalSorrow]

I'm currently working on a dropdown menu using jquery, and I've run into a snag about how I want it to look.  I'd like the top link of the menu to remain "hovered" even when I browse the lower list.

 

Does anyone know of a way to retain the hover for the top <li> even when the mouse is moving down the row to a sub <ul>?

 

Here's a model for practical reference: link here

 

Here's my simple listing for a part (two of the columns as an example) of the navigation:

<ul class="tabs">
<li><a href="fanfiction">F</a>
<ul class="dropdown">
<li><a href="fanfiction/stories.php?series=Black Blood Brothers">Black Blood Brothers</a>
<li><a href="fanfiction/stories.php?series=Gankutsuou">Gankutsuou</a>
<li><a href="fanfiction/stories.php?series=Hellsing">Hellsing</a>
<li><a href="fanfiction/stories.php?series=Inuyasha">Inuyasha</a>
<li><a href="fanfiction/stories.php?series=Rurouni Kenshin">Rurouni Kenshin</a>
<li><a href="fanfiction/stories.php?series=Trigun">Trigun</a>
</ul>
</li>

<li><a href="design">D</a>
<ul class="dropdown">
<li><a href="design/type.php?type=Divider">Dividers</a></li>
<li><a href="design/type.php?type=Table">Tables</a></li>
<li><a href="design/type.php?type=Iframe">Iframes</a></li>
</ul>
</li>
</ul>

 

And here's the CSS for the dropdown:

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
list-style: none;
display: table-cell;
float: left;
position: relative;
text-align: center;
width: 117px;
font-size: 20px;
font-weight: bold;
padding: 2px 0px 0px 1px;
line-height: 40px;
}

ul.tabs a
{
position: relative;
display: block;
}

ul.tabs a:hover { background: url(images/navhover.png) top center no-repeat; }

/* dropdowns
*************************/

ul.dropdown
{
margin: 0px
padding: 0px;
display: block;
position: absolute;
z-index: 999;
width: 116px;
display: none;
background: url(images/lowernavhover.jpg) top center no-repeat;
background-color: #ccc;
}

ul.dropdown li
{
margin: 3px;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
font-size: 12px;
font-weight: normal;
text-align: left;
text-indent: 3px;
width: 116px;
line-height: 18px;
}

ul.dropdown li a
{
display: block;
}

ul.dropdown a:hover { background: none; }