how to create multi level drop down menu using jQuery?

Question

In my website I can create level 1 submenu and it's working . but level 2 sub menu not working . please help .

This is my Html Code

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#"> Menu2&nbsp; <img alt="" src="Images/warning.png" style=" border:0px;" /></a> 
        <ul id="subnav"> 
            <li><a href="#">SubMenu1</a></li>
                <ul>
                        <li><a href="#">Sub1Sub2menu1</a></li>
                        <li><a href="#">Sub1Sub2menu2</a></li>
                        <li><a href="#">Sub1Sub2menu3</a></li>
                </ul>
            <li><a href="#">SubMenu2</a></li> 
            <li><a href="#">SubMenu3</a></li> 
            <li><a href="#">SubMenu4</a></li>
            <li><a href="#">SubMenu5</a></li> 
            <li><a href="#">SubMenu6</a></li>
            <li><a href="#">SubMenu7</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Menu3&nbsp; <img alt="" src="Images/warning.png" style=" border:0px;" /></a> 
    <ul> 
        <li><a href="#">Sub1Menu1</a></li> 
        <li><a href="#">Sub1Menu2</a></li> 
    </ul>           
    </li> 
    <li><a href="#">Menu4</a></li> 
    <li><a href="#">Menu5</a></li> 
</ul>

And This is my CSS :

#nav 
{
    margin:0;  padding:0;  list-style:none; width:640px; height:37px;
}   

#nav li 
{
    float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none; 
}

#nav li a 
{
    display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000;

}

#nav li a:hover 
{
    color:Green;
}

#nav a.selected 
{
    color:#000;
}

#nav ul 
{
    position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc;  border: solid 1px #c5c9cc; 
    -moz-border-radius: 0 0 10px 10px; border-radius: 0 0  10px 10px;
}


#nav ul li 
{
    width:124px; float:right;
}

#nav ul ul
{
    width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0  0 10px;
}

#nav ul a 
{
    display:block; height:30px; color:#000; line-height:30px; text-decoration:none;

}

#nav li ul ul {
margin:0px 124px 0 10px;
}


#nav ul a:hover 
{
    text-decoration:none;   
}

*html #nav ul 
{
    margin:0 0 0 -2px;
}

And this is my jQuery Code :

<script type="text/javascript">
        $(document).ready(function () {

            $('#nav li').hover(
                function () {
                    //show its submenu
                    $('ul', this).slideDown(200);
                    $('#subnav ul', this).css({ visibility: "hidden" });
                },
                function () {
                    //hide its submenu
                    $('ul', this).slideUp(200);
                }
            );

        $('#subnav').hover(
                function () {
                    //show its submenu
                    $('#subnav ul', this).css({ visibility: "visible" });
                    $('#subnav ul', this).slideDown(200);
                },
                function () {
                    //hide its submenu
                    $('#subnav ul', this).slideUp(200);
                }
             );
        });
    </script>

I assume your creating this for educational purposes. I mean seriously, do we need yetanotherdropdownmenu when there are already 6 million of them: google.co.uk/#hl=en&xhr=t&q=jquery+dropdown+menu — Gary Green
– Gary Green, Commented May 16, 2011 at 7:59
I checked more than 200 - 300 website from google. but i can't find my answer . — Persian.
– Persian., Commented May 16, 2011 at 10:26

doodoodukes · Accepted Answer · 2011-05-16 07:48:45Z

1

It seems like your second level is not nested in the first level. It should be in the first level's <li></li>

<li><a href="#">SubMenu1</a>
     <ul>
         <li><a href="#">Sub1Sub2menu1</a></li>
         <li><a href="#">Sub1Sub2menu2</a></li>
         <li><a href="#">Sub1Sub2menu3</a></li>
     </ul>
</li>

answered May 16, 2011 at 7:48

doodoodukes

1483 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reylimjr · Accepted Answer · 2013-03-06 02:57:12Z

Try this HTML CODE

<ul>
<li style="display: inline !important;"><a href="#">Home</a></li>
<li class="parent"><a href="#">Menu 1</a>
    <ul class="child">
        <li class="parent"><a href="#">Menu 1 child 1</a>
            <ul class="child">
                <li class="parent"><a href="#">sub child 1</a>
                    <ul class="child">
                        <li>sub child 1</li>
                        <li>sub child 1</li>
                        <li>sub child 1</li> 
                    </ul>
                </li>
                <li>sub child 1</li>
                <li>sub child 1</li>
            </ul>
        </li>
        <li class="parent">Menu 1 child 2
            <ul class="child">
              <li>sub child 1</li>
              <li>sub child 1</li>
              <li>sub child 1</li>
          </ul>
        </li>
        <li>Menu 1 child 3</li>
        <li>Menu 1 child 4</li>
  </ul>
</li>
<li><a href="#">Menu 2</a></li>

Use this html code. You notice that the <ul><li> are nested. Copy the jQuery code.

jQuery(document).ready(function($){ 
    $( '.parent' ).hover( function(){
        $(this).find('ul.child').show();
        $(this).find('ul.child').find('ul.child').hide();
    }, function(){
        $(this).find('.child').hide();
        });
});

Sorry but i can't submit this comment if i add the css code. Just visit this site for more information.. hopes this helps. http://nextopics.com/jquery-multi-level-menu/ or see the DEMO http://nextopics.com/others/dropdown-menu/

Collectives™ on Stack Overflow

how to create multi level drop down menu using jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related