drop downs linger on mega hover out

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!