Suckerfish sub-menus overlapping

[kreativity]

Hi everyone.

I'm working on a site that has a horizontal navigation menu in the header, with a horizontal sub-menu directly underneath it. I modified the Suckerfish code ever so slightly to allow the horizontal sub-menu, and it works great, until I try to make the sub-menu stay open for a specific page.

I added #current to a specific list (li) item in the top menu, and added a few lines in CSS to keep one of the sub-menus open. The problem with that is when I hover over another menu item, the new sub-menu is displayed on top of the existing sub-menu. I've tried countless modifications to the CSS, Suckerfish JS and HTML with no luck.

Relevant CSS:

#nav li:hover ul, #nav li.sfHover ul, #nav li#current ul {
display: block;
}

HTML: (i took out the link text)

<div id="nav">
<ul>
<li><a href=""></a>
 <ul>
 <li><a href=""><a></li>
 <li><a href=""></a></li>
 </ul>
</li>
<li id="current"><a href=""></a>
 <ul>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 </ul>
</li>
<li><a href=""></a></li>
</ul>
</div>

Basically what I am trying to do is make the list item with id="current" to revert to display:none when any of the other list items are hovered over, except itself. Does that make sense?

Any insight would be greatly appreciated.

[kreativity]

Figured it out!

FYI, here's how I did it:

#nav ul:hover li#current ul {
display: none;
}
#nav ul li#current:hover ul {
display: block;
}

Maybe there's a better way, but it works and it's only a couple lines in css!