drop downs linger on mega hover out - asp.net

Question

I am using this script:
http://www.teylyn.com/wp-content/uploads/2012/03/MegaMenuScript.txt
The drop downs linger / stay down after I mouse off the navigation buttons.
Here is my code:
<ul id="topnav" style="z-index: 1000;">
<li class="toplevel about">
<asp:HyperLink runat="server" ID="lnkAbout" NavigateUrl="~/Aboutus/Default.aspx" Text="About Us" CssClass="about" />
<div class="sub">
<asp:Menu ID="mnAboutUs" runat="server" DataSourceID="smdsAboutUs" RenderingMode="List" SkipLinkText="" Orientation="Vertical" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" />
</div>
</li>
<li class="toplevel equipment">
<asp:HyperLink runat="server" ID="lnkEquipment" NavigateUrl="~/Equipment/Default.aspx" Text="Equipment" />
<div class="sub">
<asp:Menu ID="mnEquipment" runat="server" DataSourceID="smdsEquipment" RenderingMode="List" SkipLinkText="" Orientation="Vertical" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" />
</div>
</li>
</ul>
The styles are:
div.sub
{
height: 1500px;
display: none;
z-index: 99999;
position: absolute;
}
li.toplevel
{
float: left;
display: block;
position: relative;
z-index: 99999;
}
li.toplevel a
{
color: #000000;
display: block;
font-size: 1.6em;
font-weight: normal;
line-height: 36px;
position: relative;
z-index: 99999;
text-align: center;
text-decoration: none;
border-left: 1px solid #FD3;
border-right: 1px solid #D90;
}
How can I make the second equipment div class "sub" hide itself when I mouse over about?

Answer 1

Try this on the mouse over event:
$(".sub").eq(1).hide(); //the number after eq() is the index of the element that contain the sub class
Good luck!