Multi Level Drop Down Menu Using Jquery

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;
}​

131 thoughts on “Multi Level Drop Down Menu Using Jquery”

  1. I enjoy what you guys are usually up too. Such clever work and reporting!
    Keep up the superb works guys I’ve added you guys to our blogroll.

    Reply
  2. Woah! I’m really digging the template/theme of this blog. It’s simple,
    yet effective. A lot of times it’s very difficult to get that
    “perfect balance” between user friendliness and visual appearance.
    I must say you’ve done a fantastic job with this.
    Also, the blog loads very quick for me on Internet explorer.
    Excellent Blog!

    Reply
  3. When I originally commented I clicked the “Notify me when new comments are added”
    checkbox and now each time a comment is added I get several e-mails with the same comment.
    Is there any way you can remove me from that service? Thanks a
    lot!

    Reply
  4. Having read this I thought it was very enlightening.
    I appreciate you finding the time and effort to put this short article together.
    I once again find myself spending way too much time both reading and
    posting comments. But so what, it was still worth it!

    Reply
  5. I just like the helpful info you supply to your
    articles. I’ll bookmark your blog and test again right
    here regularly. I am reasonably sure I will be told many new stuff proper right here!
    Good luck for the following!

    Reply
  6. Hello there, You’ve done an incredible job. I’ll definitely digg
    it and personally suggest to my friends. I am confident they’ll be
    benefited from this site.

    Reply
  7. Hi! This is kind of off topic but I need some
    help from an established blog. Is it difficult to set up your own blog?
    I’m not very techincal but I can figure things out pretty quick.
    I’m thinking about creating my own but I’m not sure where to start.
    Do you have any ideas or suggestions? Appreciate it

    Reply
  8. I have read a few just right stuff here. Definitely
    worth bookmarking for revisiting. I wonder how much effort you place to create this sort of fantastic informative website.

    Reply
  9. Great post however , I was wanting to know
    if you could write a litte more on this topic? I’d be
    very grateful if you could elaborate a little bit more.
    Thanks!

    Reply
  10. Just desire to say your article is as astonishing.
    The clarity in your post is simply nice and i could assume you’re an expert on this subject.
    Fine with your permission let me to grab your feed to keep up to date
    with forthcoming post. Thanks a million and please
    carry on the enjoyable work.

    Reply
  11. Hi there to every body, it’s my first go to see of this
    web site; this web site contains awesome and in fact fine
    stuff in support of readers.

    Reply
  12. Just wish to say your article is as amazing.
    The clearness in your post is just great and i can assume you are an expert on this subject.
    Fine with your permission let me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please keep up the gratifying work.

    Reply
  13. My spouse and I stumbled over here by a different page and thought I should check
    things out. I like what I see so i am just following you. Look forward to exploring your
    web page yet again.

    Reply
  14. Simply want to say your article is as astounding. The clarity in your post is
    simply nice and i could assume you’re an expert on this subject.
    Well with your permission allow me to grab
    your feed to keep up to date with forthcoming
    post. Thanks a million and please continue the rewarding work.

    Reply
  15. Hey There. I found your blog using msn. This is an extremely well written article.
    I’ll be sure to bookmark it and come back to read more of your useful information. Thanks for the post.
    I will definitely comeback.

    Reply
  16. continuously i used to read smaller content that as well clear their
    motive, and that is also happening with this piece of writing which I am reading now.

    Reply
  17. I was recommended this web site by means of my cousin. I am no longer sure
    whether or not this put up is written through him as nobody else
    understand such distinctive about my difficulty. You are amazing!
    Thanks!

    Reply
  18. Fantastic beat ! I would like to apprentice at the same time as you amend your site, how could i subscribe for a weblog web
    site? The account aided me a applicable deal. I were tiny bit acquainted of this your broadcast
    provided vibrant transparent idea

    Reply
  19. Great website. A lot of useful info here. I’m
    sending it to some pals ans additionally sharing in delicious.

    And of course, thank you for your sweat!

    Reply
  20. What i do not realize is actually how you’re not actually much more smartly-liked than you may
    be right now. You are very intelligent. You understand therefore considerably when it
    comes to this topic, produced me for my part imagine it from numerous various angles.
    Its like men and women don’t seem to be fascinated unless it is one thing to accomplish with Girl
    gaga! Your individual stuffs nice. At all times
    care for it up!

    Reply
  21. Thanks a bunch for sharing this with all of us you actually realize what you’re talking
    approximately! Bookmarked. Please additionally visit my web site =).
    We will have a hyperlink exchange agreement between us

    Reply
  22. I just like the helpful information you supply for your
    articles. I will bookmark your blog and test again right here regularly.
    I am relatively sure I will be informed a lot of new stuff proper right
    here! Best of luck for the following!

    Reply
  23. Hey I know this is off topic but I was wondering if
    you knew of any widgets I could add to my blog that automatically tweet my newest twitter
    updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience
    with something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

    Reply
  24. Can I simply say what a relief to discover a person that
    truly knows what they’re talking about on the web. You actually realize how
    to bring an issue to light and make it important.
    More and more people should look at this and understand this side of the story.
    I was surprised that you’re not more popular given that you surely have the gift.

    Reply
  25. Hi there exceptional blog! Does running a blog similar to this require a great deal of work?
    I’ve very little knowledge of programming but I had been hoping to start
    my own blog soon. Anyways, should you have any
    suggestions or techniques for new blog owners please share.
    I know this is off topic but I simply wanted to ask. Appreciate it!

    Reply
  26. I know this if off topic but I’m looking into starting
    my own weblog and was curious what all is required to get set up?

    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web savvy so I’m not 100% sure. Any recommendations or advice would be greatly appreciated.
    Thanks

    Reply
  27. Hi! I could have sworn I’ve been to this website before but after checking through some of the
    post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back often!

    Reply
  28. Do you mind if I quote a couple of your posts as long as I provide credit and sources back
    to your blog? My website is in the exact same niche as yours and my users would really benefit from a lot of the information you present here.
    Please let me know if this ok with you. Many thanks!

    Reply
  29. Greetings from Los angeles! I’m bored to death at work so
    I decided to browse your blog on my iphone during
    lunch break. I really like the information you provide here and can’t wait to
    take a look when I get home. I’m shocked at how quick your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyhow, superb
    blog!

    Reply
  30. Hello! Do you know if they make any plugins to
    safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    Reply
  31. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make
    your point. You clearly know what youre talking about, why waste your intelligence on just posting
    videos to your weblog when you could be giving us something informative to read?

    Reply
  32. I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but definitely you’re going to a famous blogger if you are not already ;
    ) Cheers!

    Reply
  33. I think that everything composed was actually very reasonable.
    However, think on this, suppose you added a little content?
    I am not suggesting your content is not solid, however
    what if you added a headline to maybe grab folk’s attention? I mean Multi
    Level Drop Down Menu Using Jquery – JavaScript Help is
    kinda plain. You could peek at Yahoo’s front page and note how they create
    news titles to grab viewers to click. You might add a video or a
    related picture or two to grab people interested about everything’ve got
    to say. Just my opinion, it would make your website a little livelier.

    Reply
  34. I do not know whether it’s just me or if perhaps everyone else experiencing problems
    with your website. It appears like some of the written text within your content are
    running off the screen. Can somebody else please comment and let me know if this is
    happening to them too? This could be a issue with my browser because I’ve
    had this happen previously. Many thanks

    Reply
  35. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is important and everything. But think of if you added some great photos or videos to give your posts more, “pop”!
    Your content is excellent but with images and videos, this blog could undeniably be one
    of the most beneficial in its field. Excellent blog!

    Reply
  36. I think this is among the most important information for me.
    And i am glad reading your article. But should remark on few general things, The website style is great, the articles is really
    excellent : D. Good job, cheers

    Reply
  37. Hi to all, for the reason that I am genuinely keen of reading this web site’s post to be updated on a regular
    basis. It includes pleasant data.

    Reply
  38. Aw, this was an extremely nice post. Taking the time and actual effort
    to generate a good article… but what can I say… I hesitate a lot and don’t seem to get nearly anything done.

    Reply
  39. Link exchange is nothing else however it is simply placing the other person’s weblog
    link on your page at appropriate place and other person will
    also do similar for you.

    Reply
  40. Great goods from you, man. I have understand your stuff previous to and you’re just too wonderful.
    I actually like what you’ve acquired here, really
    like what you are stating and the way in which you say it.

    You make it enjoyable and you still care for to keep it smart.
    I can not wait to read much more from you. This is really a wonderful website.

    Reply
  41. This is really interesting, You are a very skilled blogger.
    I’ve joined your rss feed and look forward to seeking more of your wonderful post.
    Also, I’ve shared your site in my social networks!

    Reply
  42. What’s Going down i am new to this, I stumbled upon this I have found It positively helpful and it has aided me out loads.
    I am hoping to give a contribution & assist different users like its aided me.
    Great job.

    Reply
  43. We are a group of volunteers and starting a new scheme in our community.
    Your website offered us with valuable information to work on. You’ve done a formidable
    job and our entire community will be thankful to
    you.

    Reply
  44. Hey I know this is off topic but I was wondering if you knew of any widgets I could add
    to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe
    you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your blog
    and I look forward to your new updates.

    Reply

Leave a Comment