Navbar with JQuery

Navbar with JQuery

Hi everybody,

I am trying to make a navbar menu works like that:

1st level --> home  company  products
2nd level-->           subitem1 subitem2 subitem3

1st level --> home  company  products
2nd level-->                           subitem1 subitem2 subitem3

For each item in 1st level, shows subitens on 2nd level. When I pass mouse over menu on 1st level, the subitens will be shown and on mouse out, the subitens will disappear on fadeout.

I made this on a Asp.Net project:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#menuprincipal > a").hover(function(e) {
            switch (e.target.id) {
                case "ctl00_ucMenuPrincipal_hplEmpresa":
                    $("#menuSecundarioEmpresa").show();
                    $("#menuSecundarioSolucoes").hide();
                    break;
                case "ctl00_ucMenuPrincipal_hplSolucoes":
                    $("#menuSecundarioSolucoes").show();
                    $("#menuSecundarioEmpresa").hide();
                    break;
            }
            return false;
        });
    }); 
</script>

<!-- 1st level -->
<div id="menuprincipal">
    <asp:HyperLink ID="hplPrincipal" CssClass='<%$ Resources:MyResource, BotaoMenuPrincipalCss %>'
        meta:resourcekey="BotaoMenuPrincipalCss" runat="server" NavigateUrl="~/Default.aspx">PRINCIPAL</asp:HyperLink>
    <asp:HyperLink ID="hplEmpresa" CssClass='<%$ Resources:MyResource, BotaoMenuPrincipalCss %>'
        meta:resourcekey="BotaoMenuPrincipalCss" runat="server">EMPRESA</asp:HyperLink>
    <asp:HyperLink ID="hplSolucoes" CssClass='<%$ Resources:MyResource, BotaoMenuPrincipalCss %>'
        meta:resourcekey="BotaoMenuPrincipalCss" runat="server">SOLUÇÕES</asp:HyperLink>
</div>
<!-- 2nd level -->
<div id="menusecundario">
    <div id="menuSecundarioEmpresa" style="display: none">
        <ul>
            <li>
                <asp:HyperLink ID="hplMenuSecundarioEmpresaSubitem1" runat="server">Subitem Empresa</asp:HyperLink></li>
        </ul>
    </div>
    <div id="menuSecundarioSolucoes" style="display: none">
        <ul>
            <li>
                <asp:HyperLink ID="hplMenuSecundarioSolucoesSubitem1" runat="server">Subitem Soluções</asp:HyperLink></li>
        </ul>
    </div>
</div>

This solutions works almost fine, except for the problem to hide the 2nd level menu after mouse is out. Other problem is when I pass mouse over any menu, hide all the other 2nd menus without needing to hide each 2nd menu one by one. I´d like to use one command to hide all 2nd menus simultaneusly.

So, I will appreciate any help to do that.

Thanks,
Marcelo,