Question

28

Multi Level Drop Down Menu Using Jquery

rated 0 times [ 35] [ 7] / answers: 1 / hits: 19149 / 12 Years ago, fri, may 18, 2012, 12:00:00

I want to design a multilevel menu using jQuery.
I have already written some code .You can see the demo here .
All this works fine. But I want to make multilevel drop down menus dynamically.

Script

$('ul#menu > li').hover(function(){

    //$('#drop' , this).css('display','block');

     $('.drop' , this).delay(20).slideDown(200);

}, function(){

 $('.drop' , this).delay(20).slideUp(200);

});

HTML

<ul id=menu>

    <li><a href=#>Home</a>

        <ul class=drop>

            <li><a href=#>About us</a></li>

            <li><a href=#>About us</a></li>

            <li><a href=#>About us</a></li>

            <li><a href=#>About us</a></li>

        </ul>

    </li>





    <li><a href=#>about</a>

        <ul class=drop>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

        </ul>

    </li>



</ul>

CSS

ul#menu

{

    margin:0;

    padding:0;

}

ul#menu > li

{

    list-style:none;

    float:left;

    margin:0;

    padding:0;

    position:relative;

}

ul#menu a

{

    text-decoration:none;

    color:#fff;

    background:red;

    display:block;

    padding:10px;

}

ul#menu > li ul.drop

{

    margin:0;

    padding:0;

    width:150px;

    position:absolute;

    display:none;

}

ul#menu > li ul.drop ul

{

    margin:0;

    padding:0;

    width:150px;

    position:absolute;

    display:none;

    left:150px;

    top:0;

}

ul#menu > li ul li

{

    margin:0;

    padding:0;

    list-style:none;

    position:relative;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 12 Years ago heidys · Accepted Answer

You need to change the jQuery script a little to accommodate for the multilevel menus like this:

$('ul#menu li').hover(function(){

     $(this).children('ul').delay(20).slideDown(200);

}, function(){

     $(this).children('ul').delay(20).slideUp(200);

});

and change html like this:

<ul id=menu>

    <li><a href=#>Home</a>

        <ul class=drop>

            <li><a href=#>About us</a></li>

            <li><a href=#>About us</a></li>

            <li><a href=#>About us</a></li>

            <li>

                <a href=#>About us</a>

                <ul>

                    <li><a href=#>Sub Item 1</a></li>

                    <li>

                        <a href=#>Sub Item 2</a>

                        <ul>

                            <li><a href=#>Sub item 3</a></li>

                            <li><a href=#>Sub item 4</a></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </li>





    <li><a href=#>about</a>

        <ul class=drop>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

            <li><a href=#>Home</a></li>

        </ul>

    </li>

</ul>

Your css is fine.
You can check the updated multilevel code at: http://jsfiddle.net/297t6/