Javascript menu with submenu help.

Hello.
My designer send me a menu that is implemented with css classes and UL and LI html tags.
Its a 2 level menu, some of the first level options have a submenu.

I need that when the user mouseover or clicks the first level option, it show the submenu.

The code for the menu is this

Please help me tto implement this with javascript or jquery.

<div id="nav" class="withsubmenu">
      <ul>
        <li><asp:HyperLink ID="home" NavigateUrl="~/Nederlands/Paginas/default.aspx" Text="Home" runat="server"></asp:HyperLink></li>
        <li>
              <asp:HyperLink  CssClass="active" ID="clubinfo" runat="server" Text="ClubInfo" NavigateUrl="~/Nederlands/paginas/verdelenleden.aspx"></asp:HyperLink>              
              <ul>
                      <li><asp:HyperLink CssClass="active" ID="voordelenleden" runat="server" Text="Voordelen Leden" NavigateUrl="~/Nederlands/paginas/verdelenleden.aspx"></asp:HyperLink> </li>
                  <li><asp:HyperLink ID="voordelenpartners" runat="server" Text="Voordelen Partners" NavigateUrl="~/Nederlands/paginas/verdelenpartners.aspx"></asp:HyperLink> </li>
              </ul>
        </li>
        <li><asp:HyperLink ID="wraps" runat="server" Text="Wraps" NavigateUrl="~/Nederlands/paginas/wraps.aspx"></asp:HyperLink></li>
        <li><asp:HyperLink ID="agenda" runat="server" Text="Agenda" NavigateUrl="~/Nederlands/paginas/agenda.aspx"></asp:HyperLink></li>
        <li>
              <asp:HyperLink ID="kenniscentrum" runat="server" Text="Kennis" NavigateUrl="~/Nederlands/paginas/Artikelsde.aspx"></asp:HyperLink>
              <ul>
                      <li><asp:HyperLink  ID="artikels" runat="server" Text="Artikels" NavigateUrl="~/Nederlands/paginas/Artikels.aspx"></asp:HyperLink> </li>
                  <li><asp:HyperLink  ID="blog" runat="server" Text="Blog" NavigateUrl="~/Nederlands/paginas/blog.aspx"></asp:HyperLink> </li>
                    <li><asp:HyperLink  ID="qanda" runat="server" Text="Q & A" NavigateUrl="~/Nederlands/paginas/questionsandanswers.aspx"></asp:HyperLink> </li>        
              </ul>
            </li>

        <li><asp:HyperLink ID="contact" runat="server" Text="contact" NavigateUrl="~/Nederlands/paginas/contact.aspx"></asp:HyperLink></li>
     </ul>
    </div>
LuisEstebanValenciaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
Check this page : http://docs.jquery.com/Cookbook/Navigation

Test page :
<%@ Page Title="Page d'accueil" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(".withsubmenu>ul li ul").hide();
        $(".withsubmenu>ul li").hover(
        function () {
            $(this).children("ul").show();
        }, function () {
            $(this).children("ul").hide();
        });
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="nav" class="withsubmenu">
      <ul>
        <li><asp:HyperLink ID="home" NavigateUrl="~/Nederlands/Paginas/default.aspx" Text="Home" runat="server"></asp:HyperLink></li>
        <li>
              <asp:HyperLink  CssClass="active" ID="clubinfo" runat="server" Text="ClubInfo" NavigateUrl="~/Nederlands/paginas/verdelenleden.aspx"></asp:HyperLink>              
              <ul>
                      <li><asp:HyperLink CssClass="active" ID="voordelenleden" runat="server" Text="Voordelen Leden" NavigateUrl="~/Nederlands/paginas/verdelenleden.aspx"></asp:HyperLink> </li>
                  <li><asp:HyperLink ID="voordelenpartners" runat="server" Text="Voordelen Partners" NavigateUrl="~/Nederlands/paginas/verdelenpartners.aspx"></asp:HyperLink> </li>
              </ul>
        </li>
        <li><asp:HyperLink ID="wraps" runat="server" Text="Wraps" NavigateUrl="~/Nederlands/paginas/wraps.aspx"></asp:HyperLink></li>
        <li><asp:HyperLink ID="agenda" runat="server" Text="Agenda" NavigateUrl="~/Nederlands/paginas/agenda.aspx"></asp:HyperLink></li>
        <li>
              <asp:HyperLink ID="kenniscentrum" runat="server" Text="Kennis" NavigateUrl="~/Nederlands/paginas/Artikelsde.aspx"></asp:HyperLink>
              <ul>
                      <li><asp:HyperLink  ID="artikels" runat="server" Text="Artikels" NavigateUrl="~/Nederlands/paginas/Artikels.aspx"></asp:HyperLink> </li>
                  <li><asp:HyperLink  ID="blog" runat="server" Text="Blog" NavigateUrl="~/Nederlands/paginas/blog.aspx"></asp:HyperLink> </li>
                    <li><asp:HyperLink  ID="qanda" runat="server" Text="Q & A" NavigateUrl="~/Nederlands/paginas/questionsandanswers.aspx"></asp:HyperLink> </li>        
              </ul>
            </li>

        <li><asp:HyperLink ID="contact" runat="server" Text="contact" NavigateUrl="~/Nederlands/paginas/contact.aspx"></asp:HyperLink></li>
     </ul>
 </div>
</asp:Content>

Open in new window

0
 
LuisEstebanValenciaAuthor Commented:
it worked right away, perfect solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.