Tutorials

Sexy Drop Down Menu w/ jQuery & CSS

June 2nd, 2009

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.


View Demo of Sexy Drop Down Menu

Drop Down Menuu w/ CSS & jQuery

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.

ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}

Step3. jQuery

For those who are new to jQuery, you can learn about it here.

The following script contains comments explaining which jQuery actions are being performed.

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
	
	$("ul.topnav li span").click(function() { //When trigger is clicked...
		
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() { 
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

Drop down menu that degrades gracefully

This is what it looks like when javascript is disabled:

Drop down menu that degrades gracefully

View Demo of Sexy Drop Down Menu

Conclusion

Note: I went ahead and added the rounded corners to the demo (CSS3 – Only supported in Firefox, Safar, & Chrome). If you would like to give it a try, check out this tutorial.

Experiment and customize this to fit your needs! If you have any questions, concerns, suggestions, or comments, please do not hesitate to let me know.

Author: Soh Tanaka

Soh Tanaka is a Los Angeles based Web Designer and blogger, who recently launched a CSS Web Gallery called Design Bombs. For more front-end web development tutorials, check out his web design blog or you can follow him on twitter @SohTanaka

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

747 comments for „Sexy Drop Down Menu w/ jQuery & CSS
  1. Heather on June 2nd, 2009 at 2:30 pm

    Very smooth, and looks easy to implement. I also like how it degrades nicely with javascript turned off.

    • Rafa Garcia on June 3rd, 2009 at 2:45 am

      When i disable javascript in my browser, i see no spot of the submenus.
      Apart of this, a great work.

      • insic on June 3rd, 2009 at 8:07 am

        +1 its indeed awesome. nice work.

      • santosh on November 25th, 2009 at 6:10 am

        I saw insic’s comments on many other blogs.
        she comments almost all post on all these blogs.
        I don’t know how she got that much time to read all post.

        May be this just a trick to get back link to her blog.

      • Derrick on June 19th, 2009 at 8:18 am

        Yes, with javascript turned off, you will not see the submenus, but the primary links still work.

      • Alice on July 13th, 2011 at 9:01 am

        I am having problems with this navigation.

        1st. If I put the first text up to the edge of template by using # in the css then my content disappears.

        2nd. The topnav has a invisible bar below it so it stops the content from going any higher.How to delete it?

        3rd. The hover light image does not appear with the coding.

        Basically,I’m using this navigation without the drop down for my site so it would look stylist and easy to use.

      • nanditha on November 11th, 2009 at 11:01 am

        Although i included the jquery.js file within the header, the triger doesnt load!! can anyone figure out wat the problem could be….

        the following is the jquery.js file

        $(document).ready(function(){

        $(“ul.submenu”).parent().append(“”);

        $(“ul.menu li span”).click(function() {

        $(this).parent().find(“ul.submenu”).slideDown(‘fast’).show();

        $(this).parent().hover(function() {
        }, function(){
        $(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up

        });

        }).hover(function() {
        $(this).addClass(“subhover”);
        }, function(){
        $(this).removeClass(“subhover”);
        });

        });

      • Vipin on January 4th, 2010 at 6:26 am

        $(”ul.submenu”).parent().append(“”);

        span missing in the above line. it shoudl be
        $(”ul.submenu”).parent().append(“span”);

        cuz the menu gets activated on the click of the span.

        i hope that solves the problem….

    • prashant on January 11th, 2010 at 3:02 am

      well said heather. Similar “sexy bookmark” like effect is nicely done without javascript. Have a look i really like this.. http://www.webdeveloperjuice.com/2009/12/15/sexy-bookmark-like-effect-using-pure-css/

  2. yasser on June 2nd, 2009 at 2:58 pm

    Very nice :)

    thanks ,

    • chris on June 2nd, 2009 at 3:40 pm

      I love the animation, but not so much the small arrow. Too easy to miss! Could you show a version with only rollovers?

  3. Steven Snell on June 2nd, 2009 at 3:39 pm

    Very nice tutorial Soh. Thanks.

  4. Egydes on June 2nd, 2009 at 3:41 pm

    I love It :) thanks for sharing

  5. Alan Moore on June 2nd, 2009 at 3:42 pm

    Would it not be better to have some CSS allow the drop downs to appear when the menu item is hovered over, but then have jQuery add the neat animations if JS is turned on?

    Nonetheless, very impressive looking.

  6. required? whatever on June 2nd, 2009 at 3:49 pm

    waaay easier and more elegant done in Flash(TM)

    Lets see iQuery and CSS do easing

    • rich on June 2nd, 2009 at 4:29 pm

      Flash is stupid. Enjoy paying for your proprietary runtime!

      • scifisi on October 23rd, 2009 at 8:29 am

        Actually the Flash plugin for all browsers is – and has always been – free.

        There is also a Flash SDK, which is free and also Flash Develop which again is completely free.

        Enjoy being ignorant.

        If Flash is installed and enabled use it. If JavaScript is enabled – use it!

      • Michael on November 19th, 2009 at 1:15 pm

        Search engines will not spider your navigation link structure. Flash eats up the processing power of the cpu. You need a plugin. You would be required to check for plugin, then deliver a second menu if they don’t have the plugin. Now you’ve got two sets of data and code. There are z-index issues with flash, the nav showing up on top of modal windows etc… There are popups to update your plugin if it is out of date. These are just a few reasons flash as navigation are a user experience nightmare. I’ll also point out that no top tier web site uses flash for their navigation, not even Adobe on its flash plugin pages.

      • James on January 15th, 2010 at 3:40 pm

        Spiders don’t only look at your navigation link structure. Make a proper site map and you side step that whole issue.

        Unless your target audience are all cheap bastards and all bought their computers in the 90s, a flash menu will not eat up much processing power of a cpu at any noticeable level.

        Providing a second menu is no more of a hassle than whats in the above tutorial. Take the menu and link to a pages with the rest of the links.

        There are no z-index issues with flash. There are programmer issues with programmers not knowing how to properly use the z-index.

        If your browser is out of date, and with your cpu comment it is safe to assume your entire computer is out of date, the script above won’t work anyway as older browsers have serious issues with jquery. Hows that for a popup for being out of date?

        Your comment about the top tier websites not using a flash menu is irrelevant because top tier sites are not about looking artistic and flashy, they are about being simple, straight forward and working.

        The reason Adobe doesn’t use it is because of common sense. It would be a catch 22 if in order to get a plugin, you have to have the plugin.

    • Firefly on June 2nd, 2009 at 5:28 pm

      jQuery does do easing…

      • David on December 17th, 2009 at 6:55 am

        just wondering .. how is easing possible in jQuery. As I understand it, easing if you e.g. do a fade then you can make it fade slower toward the end of the fade. I would love it if this were possible in Jquery .. but I don’t think this is possible.

      • David on December 17th, 2009 at 7:01 am

        Never mind .. anything is possible .. just found the following link: http://gsgd.co.uk/sandbox/jquery/easing/

      • Miroslav on January 19th, 2010 at 12:37 pm

        David, I’m Flash developer since 2002. and I have been in web business since 1997.
        When you say “how is easing possible in jQuery” you don’t understand AS and JS at all. AS is based on ECMAScript like JS and easing in Flash was able in version AS1, so sure it is possible in JS!
        In my opinion it is stupid to use Flash menus in HTML based sites (it always was). On other side, people, give Flash more respect while talking about it, because Flash deserves it. Most ideas and effects done by jQuery come from Flash world (see credits on http://gsgd.co.uk/sandbox/jquery/easing/). I’m very happy that I don’t need Flash to make nice effects on my HTML sites. But, if I’m working some presentation site, or reach multimedia site with games and lot of interactivity, I use Flash and jQuery will never change that.

    • Dave on June 2nd, 2009 at 5:46 pm

      Nice tut, thaks a lot

    • Markus on June 8th, 2009 at 1:36 pm

      Using a proprietary, non-accessible, non-indexable plugin for your main menu is just plain old stupid, sir!

      Also: jquery.easing.js

    • Mordy on December 23rd, 2009 at 2:15 am

      Does anyone still use flash?

  7. Sean on June 2nd, 2009 at 3:54 pm

    When Javascript is turned off, the sub-navigation isn’t available to users with CSS.

    This would be easily attainable by adding a class, styling for hover, and then removing the class with Javascript.

    ul.hover li:hover ul.subnav { display:block; }
    $(‘ul.hover’).removeClass(‘hover’);

    Now, with only CSS, the menus drop down when we hover over a link. And if Javascript is enabled, we remove the class, so hover doesn’t mess up our new effect. And we allow an animated, clickable effect instead.

    • montana flynn on June 2nd, 2009 at 7:14 pm

      Great idea and suggestion! I am going to write about using javascript unobtrusively if your interested in helping drop me a line through my blog!

    • Mariusz on June 2nd, 2009 at 10:59 pm

      li:hover will not work in IE6.

      • Sean on June 3rd, 2009 at 8:59 am

        That doesn’t bother me so much. But you can easily add the hover behavior htc file in an IE6 stylesheet.

  8. Issa Qandil on June 2nd, 2009 at 4:09 pm

    looks wonderful, thx for sharing

  9. argie on June 2nd, 2009 at 4:20 pm

    looks nice but the fact that you’re supposed to click on the drop down arrow is very unintuitive. perhaps just have the drop down appear on hover?

    • Adam on November 1st, 2009 at 11:02 pm

      argie, instead of
      $(“ul.topnav li span”).click(function()
      Just change it to
      $(“ul.topnav li span”).mouseover(function()

      Problem solved for intuitiveness.

      The only thing I dont like is that the drop down doesn’t come on when you hover over the menu item itself, but rather the little arrow.

      • Ron on January 2nd, 2010 at 12:14 pm

        thanks adam

  10. Eric Roberts on June 2nd, 2009 at 4:22 pm

    Also, you could add the tags to the parent item with jQuery, instead of leaving it blank in the HTML.

    Good tutorial!

  11. Alex Garcia on June 2nd, 2009 at 4:34 pm

    There should be a timeout for the mouseout event of the menu… It’s too easy to mouse past the last item of the menu, which results in the menu closing too early.

    But otherwise, it looks nice and seems to degrade well.

  12. Eric on June 2nd, 2009 at 5:29 pm

    Love it!

  13. anon on June 2nd, 2009 at 6:52 pm

    .. Fails without using a mouse. You can’t tab through the subnavigation!

  14. Dragonica on June 2nd, 2009 at 7:14 pm

    Hmmm, looks interesting. I might use this for my new site. What about multi level menu with subcategories and stuff?

    • Erik Stark on January 7th, 2010 at 12:14 pm

      I was curious if anyone has tried making this a multi-tiered navigation with subcategories and such. I’ve been recently trying to do this, and any help would be great.

      • Kai on January 12th, 2010 at 10:19 am

        Yeah, I made a subcat menu pretty easily with only minor modification. Problem is, IE does not display them correctly, but whatever. Still on it and I don’t care about IE anyhow.

        Just add ul class=”subsubnav” or something, then duplicate the css and jquery functions for subnav actions and it’s good to go.
        You’d have to modify the subsubnav css to z-index to the left or right with positive or negative left margining.

        I don’t know why the append span thing is in the jquery code. it makes much more sense to just do this:
        $(“ul.topnav li a”).hover(function() { …

        and have it drop the menu down when someone hovers over the link attached to the menu.
        Plus, ditch all of the background images and such that are all over the css for this thing. totally unnecessary.

        As for the disabled javascript and all that, just put normal navigation in a parent id div and have js write the new jquery nav in on page load. If js is disabled, the call to the navigation rewrite will not happen and you’ll have a normal nav for those users. No harm on search engine spidering. transparent to the user. everyone wins.

        I also wanted to comment on people complaining about flash vs jquery, google indexing and all that jazz. Calm down people. Use flash if you want to. Use jquery if you want to. Detect the bots to feed flash alternatives if you put critical navigation stuff in flash… or submit a sitemap xml page to the search engines.
        No, you won’t be banned or docked from search results if you toggle navigation between flash and html for bots.
        The argument on resources or cpu needed for either is so minuscule you’d have to be running youtube or facebook for those things to compound to a serious level, and if you were running those sites, you probably wouldn’t be googling jquery dropdowns as a code source or need reminding on technical issues like that.

        This menu provided here is pretty useful. Could be more complete, but anyone that’s ever touched jquery, html and css will know how to expand it to their needs.

        Thanks for posting it.

      • Matt on July 14th, 2011 at 6:23 am

        Kai can you post your code for the subcat menu? i’m having trouble implementing it… any luck on making it compatible with IE?

        i can get the subcat menu to show but it shows when i mouseover any subitem. i want it to show only when there IS a subcat item associated to the submenu item they are hovering over.

  15. Joel on June 2nd, 2009 at 7:33 pm

    Use outline:none; on your links, it will give the menu a bit cleaner look.

    • Joost Kiens on June 2nd, 2009 at 8:11 pm

      Yeah it looks nicer, but it also takes away any visual clue for people navigating with the keyboard.

      • justintime on November 4th, 2009 at 2:36 pm

        that and not to mention IT IS visually misleading that you really have to ‘aim’ for the arrow for the dropdown.
        3.2 out of 5

  16. d00d on June 2nd, 2009 at 7:41 pm

    a:focus{outline:none} will get rid of those annoying outlines the browser creates around clicked links.

  17. d00d on June 2nd, 2009 at 7:42 pm

    Woah. Beaten to the punch.

  18. Eric on June 2nd, 2009 at 8:12 pm

    Doesn’t work if JavaScripts isn’t enabled in the client. I’m all for cool menus, but first and foremost it needs to work in all use cases.

    E

    • Mariusz on June 2nd, 2009 at 10:58 pm

      I think there’s no working cross-browser dropdown menu that works without Javascript (even ye olde :hover version requires some JS to work in deprecated browsers like IE6). To make it ugly, but working in non-JS browsers, simply go for $(‘ul subnav’).hide(); on display:block’ed subnav which will not hide it in non-JS browsers.

      • Jake on October 17th, 2009 at 6:09 pm

        Actually Stu Nicholls has built dozens that work across the board, css only, accessible, and work fine in IE.

  19. saurabh shah on June 2nd, 2009 at 9:49 pm

    nice and simple to use … very handy … thnx for sharing ..

  20. Mariusz on June 2nd, 2009 at 10:55 pm

    Using things like that: $(“ul.subnav”).parent().append(“”); should make you fall underground from shame, really. :^)

    Enumerate children, append anchor leading to #subnav-{child_number} – voila, nice and semantic.

  21. shin on June 2nd, 2009 at 11:28 pm

    It works with IE6 as well.

    It might be a good idea to have hover function rather than click function on the arrows.

    Some may not notice it is clickable, and visitors are used to a css dropdown menu which comes down when they hover over it.

  22. Ariyo on June 2nd, 2009 at 11:45 pm

    Awesome effect. I love it.

  23. Jamie Allsop on June 3rd, 2009 at 12:45 am

    This is some really nice navigation and I like that it degrades nicely. I was thinking the same as @shin, instead of having to click on the arrow for it to drop down you just hover over it, although I do like the fact you have to click on the arrow for it to drop down I don’t think users will find it that user friendly.

  24. Milos on June 3rd, 2009 at 1:37 am

    very nice… thanks

  25. Fausto on June 3rd, 2009 at 5:13 am

    Nice navigation, thanks for share.

  26. Steve Mulder on June 3rd, 2009 at 7:27 am

    Doesn’t work in Opera

    • Adam on November 1st, 2009 at 11:04 pm

      Who cares.

      99.999% of the world doesn’t live in Sweden.

  27. Matthew Johnson on June 3rd, 2009 at 7:33 am

    Awesome tutorial, this is a great nav example! Nice work. :D

  28. Ray Gulick on June 3rd, 2009 at 7:48 am

    While I really like this, I was thrown off at first by the way it operates, which requires a click on a pretty small target area to activate the dropdown. This is so different from the expected behavior (dropdown activated by hovering over the nav item) that I thought it was broken at first. I suspect most web users would not stick around long enough to figure it out.

    • Mark Luker on June 3rd, 2009 at 10:42 am

      My thoughts exactly. I’ll be sure to change this behavior when I use this code on my next project ;)

  29. Maverick on June 3rd, 2009 at 7:48 am

    wow, a very nice looking menu. but function-wise i feel the drop down menu should open on OnMouseover instead of OnClick as users expect drop down menus to open up on hovering over the arrow.

    other than that, very nice work.

  30. Dario Gutierrez on June 3rd, 2009 at 8:07 am

    Looks great, I like the smooth animation. Thanks for share.

  31. w1sh on June 3rd, 2009 at 8:16 am

    It’s about time someone posted this much needed tutorial. Please, more tutorials on interface effects that are actually used.

  32. Soh Tanaka on June 3rd, 2009 at 8:20 am

    Hey girls/guys,

    thank you all for your feedback and constructive criticism~

    I was actually trying to emulate the http://www.digg.com drop down menu (where you click on the arrow to the side of the nav link), but with my own twist~

    The main point that I now have to agree with is the click vs hover option, which I do agree this may be a usability issue.

    Solution:

    http://www.sohtanaka.com/web-design/examples/drop-down-menu/hover.htm

    The code I change is below:

    $(this).parent().find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){
    $(this).height(“auto”);
    });

    For those who are asking why this is not working w/out javascript, CSS does not allow any sort of animation and it also has issues with older browser like IE6 (li:hover does not work in older browsers). I used jQuery to overcome these issues, and for it to work in all major browsers (Firefox, IE6-8, Opera, Chrome, Safari).

    I did how ever have mentioned that those who have js disabled, will be still able to cruise the navigation without a problem (w/out the sub nav). Please see notes above~

    I also do not recommend doing this flash (for the comments above). If the user does not have a flash player or the latest version, they would miss your main nav, and on top of that search engines will pass right over them as well.

    Thanks again for this opportunity Noura, and learning experience by the great comments from readers!

    • Noupe on June 3rd, 2009 at 12:22 pm

      Thanks Soh for this great tutorial. We would love to see more tutorials having such elegant and stylish effect from you :)

      • Magdy on June 22nd, 2009 at 3:39 am

        I do agree with you, This tutorial is absolutely useful and it was pretty much neat, organized, and easy to understand.

        Thanks Soh for this tutorial, and thanks to Noupe for giving us that chance to see such interesting tutorials.

        cheers =]

  33. ncj on June 3rd, 2009 at 11:11 am

    I like these however, I would like to see the dropdown triggered on the link and not beside the link and I do believe the dropdowns need to be keyboard accessible.

    I don’t agree with whitehouse.gov’s solution to the same problem (I have no idea what technology they are using) by repeating all the links at the bottom of the page.

  34. honour chick on June 3rd, 2009 at 12:19 pm

    excellent tutorial…thanks for sharing this ;)

  35. Janko on June 3rd, 2009 at 12:42 pm

    Very nice tutorial, good work, Soh!

  36. DDamir on June 3rd, 2009 at 6:08 pm

    Nice.Thank you.

  37. agilius on June 4th, 2009 at 4:10 am

    Great example of Jquery usage. I enjoyed it and I see that it works well even though you click the arrow, then hover-out, then click fast again the arrow and so on.

    Thanks, keep em coming!

  38. Selvam on June 4th, 2009 at 11:57 pm

    jquery nicely used…..awesome dropdown

  39. Greg on June 6th, 2009 at 2:56 am

    What a great nav system! So simple to implement. I modified it slightly to allow the sub-nav to open up on mouse over rather than click. To do this just change

    $(“ul.topnav li span”).click(function()

    to

    $(“ul.topnav li span”).mouseover(function()

    Brilliant! Thanks very much.

  40. colin on June 6th, 2009 at 3:51 pm

    Really love this, but is there any fixes for opera i’ve been bustin my nuts tryin to work it out

    cheers, keep up the good work

  41. Archetoy on June 7th, 2009 at 6:34 am

    soooo nice Soh. The “hover” implementation variation is fantastic, and really intuitive.

  42. Joseph Smith on June 7th, 2009 at 7:00 pm

    Yea, it’s really so very intuitive indeed. And creative!!

  43. Dream Meanings on June 8th, 2009 at 12:04 am

    The css drop down menu was pretty hot. Seems pretty easy to implement too once you have the jquery code included, then it is just a matter of editing html lists.

  44. Benjamin Reid on June 9th, 2009 at 6:30 pm

    Nice TUT, but as a few people have set, the dropdown needs to function when you click on the full button not just the arrow. From a UI point of view, it’s best just to add category page into the dropdown.

  45. Neil on June 9th, 2009 at 6:35 pm

    That is annoying!

  46. shevaa on June 9th, 2009 at 10:43 pm

    Wow… Nice Drop Down…. Nice Share…

  47. Thomas on June 10th, 2009 at 1:00 pm

    I can’t see his demo. Im using Safari 4 and javascript is enabled.

  48. Alex on June 10th, 2009 at 3:04 pm

    Useless to me (and probably alot of other people) unless this supports a 3 or 4 multi-tier drop down list.

    Which right now, I don’t see this doing….

  49. Ty (the Web Guy) on June 10th, 2009 at 8:11 pm

    “Studies show that top navigations tend to get the most visual attention when a user first visits a site.”

    I completely agree, but anyone have links to studies with this conclusion? I’m working on a project that can really use this kind of supporting documentation.

  50. Ashish on June 12th, 2009 at 9:54 am

    Very nice but two thing should be added to this:
    1. It should work on click of menu text also
    not only on arrow.
    2. Where is the 2nd step?

  51. Babu on June 12th, 2009 at 12:54 pm

    Can I use this dropdown commercially?

  52. robb on June 13th, 2009 at 10:47 pm

    loved this !!

  53. Jaspal Singh on June 15th, 2009 at 12:33 pm

    very nice menu.

  54. tom on June 16th, 2009 at 1:36 am

    If I have a image below this menu.. is the drop down menu going to push the image down.. or is it going to overlap the image?

  55. library book on June 17th, 2009 at 8:00 am

    Very nice menu. Good job

  56. Robert T on June 17th, 2009 at 8:40 pm

    Whoa, I didn’t even figure out how to use until I read more. It thought it was broken. I expected this to work with the cursor hovering over the button text. The fact I had to first focus on the little arrow and second, actually click on it, was very unintuitive to me.

  57. David L on June 17th, 2009 at 11:50 pm

    It’s so frustrating that something as slick and stylish presents problems from a usability aspect – form should always follow function. I would have rather the author focus on making the text the active trigger, and not worry about the mouseover on the arrow. It’s a pity, and the only reason I won’t be using it for a project I have on at the moment. Fingers X’d for an update!

  58. Hoi on June 18th, 2009 at 12:18 am

    Great menu! I have one question about using jquery tabs near the menu, however. When I click on the menu the dropdown box hides behind my jquery tabs. Do you know why that may be?

    Thanks!

  59. Jasmin Halki? on June 18th, 2009 at 2:15 am

    Very nice. Thank you!

  60. Peter on June 18th, 2009 at 2:53 am

    I use the following modification to support drop down
    while just clicking on the text. Someone more knowledgeable should have a look if it can be done better. You can have both ways by just adding this code to the existing.

    // modified to work on click of top item
    $(document).ready(function(){

    $(“ul.topnav”).parent().append(“”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $(“ul.topnav li”).click(function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    // $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

    $(this).find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){
    $(this).height(“auto”);
    });

    $(this).hover(function() {
    }, function(){
    $(this).find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });
    });

  61. web media on June 18th, 2009 at 11:53 am

    Hi, we are trying this script and create a custom style. Only issue remaining is IE6 will not cooperate. I hope IE6 will leave our lives very soon. Thanks for the tutorial, well done ;o)

  62. Josh on June 19th, 2009 at 12:06 am

    Is there a download link for all of this? Images mainly, i can see the jquery and html example in the source. But i may just be missing something.

    Anyone?

    Thanks in advance :)

  63. Vipul Limbachiya on June 19th, 2009 at 5:40 pm

    This is really awesome!! thanks for sharing :)

  64. nainpreet on June 20th, 2009 at 11:27 am

    Nice article. It would be even nicer if you provide the background images for download. It will help rookies like me to completely imitate what you have taught in this article.

  65. Hello_electro on June 21st, 2009 at 6:35 am

    First off: this scripts is terrific!

    but off course, i am facing a programming woe!

    so for some reason, the code works fine in MSIE (believe it or not!) but in Firefox the drop down image will not show. I noticed that in the section of the script where:

    $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

    it will work fine in MSIE and not FF. HOWEVER if I change:

    (“”);

    to:

    (“<span></span>”)

    the code works in FF and not MSIE. in MSIE it will leave out the drop down image but make a huge gap between the level one navigation items where the image should be.

    Anyone have an idea why this is happening or why MSIE or FF is interpreting this differently? oR does anyone have a workaround with the code?

    Here is the full code. Keep in mind the css is unchanged (havnt got to formatting for site yet)and i am using the latest jquery. one other weird thing. i noticed that if i look at the source code from my site the (“”); is showing up as color coded. but on the demo page it is not. i am using SilverStripe CMS if that helps too. :

    Home

    Tutorials

    Sub Nav Link
    Sub Nav Link
    Sub Nav Link
    Sub Nav Link
    Sub Nav Link

    Resources

    Sub Nav Link
    Sub Nav Link

    Sub Nav Link
    Sub Nav Link
    Sub Nav Link
    Sub Nav Link

    About Us

    Advertise
    Submit
    Contact Us

    $(document).ready(function(){

    $(“ul.subnav”).parent().append(“<span></span>”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

    $(“ul.topnav li span”).click(function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });

    });

    THANK YOU FOR ANY HELP!!!!

  66. Hello_electro on June 21st, 2009 at 6:40 am

    ok, so i just realized the posting actually read the html! The issue is with using span in jquery. when using Character Entities for it shows up fine in FF. in IE it includes the span as text in the browser.

  67. Hello_electro on June 21st, 2009 at 11:32 pm

    So if anyone understood what my problem was and is having the same issue (sorry, i know i was terrible at explaining the problem) the solution was pretty simple:

    instead of writing the code directly in the html page, create a javascript file and call it from within the page. I think it may have something to do with using a CMS, but not sure.

  68. Gusto on June 24th, 2009 at 12:58 pm

    How can i change the height of the submenu?

  69. Alicia on June 28th, 2009 at 11:39 am

    This is pretty awesome. I’ll be using it alot!
    Thanks!

    • karthik on July 14th, 2011 at 3:40 pm

      you are super……..

  70. Nick on July 3rd, 2009 at 3:42 am

    Hi,

    How does one retain the hover state on the topnav as one browses on the subnav?

    Thanks.

    Nick

  71. Abhishek Dilliwal on July 3rd, 2009 at 4:06 pm

    very nicely explained thanks… :)

  72. Website Designer Katy, TX on July 5th, 2009 at 12:34 pm

    I was looking for a menu like this. Nice work!

  73. Richard Sweet on July 7th, 2009 at 11:23 pm

    Excelent, really useful. I just changed it slightly so the menus drop when you roll over the actual link, not when you click the down arrows.

    • efi on July 23rd, 2011 at 11:19 am

      How??? Please let me know!

  74. adrian on July 8th, 2009 at 3:58 pm

    Hi all,
    i m newbie to this…
    having a blank page when tried to create the drop down menu…
    below are the codes where i created as .html
    DropDownMenu.js = Step 3
    DropDownMenu.css = step 2
    anything that i miss out??

    Home

    Tutorials

    Sub Nav Link
    Sub Nav Link

    Resources

    Sub Nav Link
    Sub Nav Link

    About Us
    Advertise
    Submit
    Contact Us

  75. Pradeesh on July 9th, 2009 at 4:44 pm

    Please give me the link to download this

  76. drifter on July 9th, 2009 at 10:20 pm

    Hi

    This is great!

    I don’t know much about this kinda thing, but I use Joomla! CMS so. Since it loads MooTools by default it will need to be converted to work with that instead of JQuery. I’m sure it will be small changes to the JS file only. Does anyone have an idea how?

    dM

  77. Angel on July 10th, 2009 at 7:41 am

    Hello, this is a great menu….but how I am not pleased with the way this looks if you add another set of links under a subnav link. Is there a way to get rid of the bullets and the spacing between each one that makes it look pretty awful?

    for example this is what I have:

    Home

    A

    A1

    1

    a
    b

    2

    A2

    B

    Sub Nav Link
    Sub Nav Link

    C
    D
    E
    Contact Us

  78. JayDee on July 16th, 2009 at 9:59 pm

    This menu was extremely easy and quick to implement.

    Thanks for putting this up. To add to nick’s point above, it would be nice to retain the hover state on the top navigation items while over the drop menus…

    Great stuff though. Thanks!

  79. Andrew on July 17th, 2009 at 2:17 am

    Hi are we allowed to have use this menu?

    I have it on my site working great but just wanted to know if we are allowed to use it.

    And thanks best menu out there in my opinon.

  80. Stephen on July 17th, 2009 at 9:34 pm

    Fantastic and simple menu! Thanks for this.

    I am having a problem, though, using it with my current project. Unfortunately, I am forced to use MochiKit alongside jQuery on the current site I’m working on. So, I am using jQuery’s noConflict feature and MochiKit’s DOM like so:

    jQuery._$ = MochiKit.DOM.getElement;
    var $j = jQuery.noConflict();

    My problem is that the menu works in IE, but not in Firefox (weird since it’s usually the other way around). Firefox won’t display the dropdowns at all.

    Any tips on how to get it to work properly in Firefox, too? I would think that such simple code shouldn’t have a problem, but clearly there is some sort of issue.

    I you probably don’t have any experience in using MochiKit and jQuery together (because normally you wouldn’t need to do that), but any suggestions would be greatly appreciated.

    Thanks!

  81. Stephen on July 17th, 2009 at 10:36 pm

    Okay, I know now that it’s not an issue with MochiKit and jQuery working together. Must be some sort of CSS issue, then. My CSS file is pretty big, so it’s probably going to take me a while to figure this out. :(

  82. Stephen on July 18th, 2009 at 12:02 am

    Fixed it. It was just a property in the CSS file that was conflicting. All is good. Thanks again for this great menu code!

  83. Search Scripts on July 24th, 2009 at 10:11 pm

    Very Nice Drop Down Menu!

  84. Mike McAlister on October 13th, 2009 at 11:23 am

    This is a fantastic little piece of script. Just having one hangup here. Probably from my excessive customizing, but I thought I’d ask anyway in case someone has experienced the same issue.

    http://sixonefivedesign.com/cleancut/

    In IE6 and IE7, the menu drops fine but once you start to hover over the sub-items, the menu dies and scrolls back up. I’ve tried nearly everything I could think of, now I’m left scratching my head!

    Any help would be appreciated!

  85. zack on October 15th, 2009 at 5:23 pm

    Hi,

    Where we can download the images that are used in this example?

    Regards
    Zack

  86. Gustavs on October 17th, 2009 at 12:29 am

    Interesting, but seems a bit un-user-friendly.

  87. gmail on October 17th, 2009 at 2:23 am

    Gracias!! exelente sitio

  88. Imran Ahmad Jan on October 18th, 2009 at 3:53 am

    Thanks for such a step by step tutorial. I am new to jQuery. Just also mention to create file how and where, so that who did’nt used css and jQuery ever how and where they will ceate how many files, seperate or one etc. Any how i sort it out but for others like. Thank u very much sirrr again. . .

  89. ales on October 23rd, 2009 at 1:24 am

    i like this drop down menu a lot. I was trying to implement it to my website.

    The only issue I face is how to get dropdown menu shown in front of cufon h1 and h2 tags (i use http://wiki.github.com/sorccu/cufon).
    So when drop down menu opens and shows menu items, cufun item is showned in front and menu itmes are hidden behind.

    I’ll be happy to get some tips to solve this.

  90. novice on October 23rd, 2009 at 5:57 am

    hi!
    i tried your tutorial and implimented in my website. it is working properly. But, below the menu, i inserted a carousel. my problem is that, the carousel is in the top layer and the menu (specifically, submenus) when it is animating, maximum part of it is hidden below the carousel. i tried z-index in several divs, but no success.
    plz help.
    thank you

  91. Mike on October 26th, 2009 at 3:24 am

    Thanks for the tutorial. Will definitely play around with what you got here! Nice work!

  92. Zain Shaikh on October 28th, 2009 at 12:19 am

    wow, its really cool, but it is not 508 compliant, it does not work when Jaws is reading the link :(

  93. Duane on October 29th, 2009 at 8:13 pm

    Thanks for this… really nice work!

  94. Mike on October 31st, 2009 at 11:12 am

    Beautiful Work. When I hover over the menu the submenu goes below my form. Can somebody please tell me how to fix it.

    Mike

  95. SWP on November 1st, 2009 at 1:57 pm

    Nice tutorial, I can wait to try this out.

  96. kamal on November 2nd, 2009 at 6:05 pm

    very nice tutorial…
    this gonna work on my project :]
    thanks for sharing this tutorial

  97. Kris on November 3rd, 2009 at 11:45 am

    The dropdowns go behind a SWF file on any Windows browser. Any idea on how to make it stay on top of the SWF? Z-index doesn’t appear to be working.

  98. HeartDisk on November 4th, 2009 at 3:28 am

    Awesome Menu i love it

    keep sharing

  99. Sarfraz on November 5th, 2009 at 1:26 am

    Awesome!

    Is it possible to show the ‘ARROW’ selected when ‘TUTORIAL’ is clicked and we are on ‘TUTORIAL’ page?

  100. shawnp4h on November 5th, 2009 at 10:46 am

    Very Helpful.

    definitely I will use for my website designs…

    Thanks u so much..

  101. manoj on November 6th, 2009 at 1:12 am

    awesome tutorial !

  102. Mandi on November 6th, 2009 at 1:58 pm

    For those of us who don’t know…where are we putting the jQuery stuff? does it go in its own document with a pointer in the heade of the other document or what?

  103. Brian on November 6th, 2009 at 4:32 pm

    Brilliant – for designers and front end dev this stuff helps a lot – thanks

  104. Noel on November 10th, 2009 at 1:01 am

    very nice…

  105. tuna on November 10th, 2009 at 1:33 pm

    yeah, really sexy :) I like it very much..

  106. YosiM on November 11th, 2009 at 1:30 pm

    simple and nice…I used it

    Thanks,

  107. pynouch on November 17th, 2009 at 10:17 am

    Very useful. I’m gonna use this for my clients’ website for sure.

  108. siebke on November 19th, 2009 at 5:01 am

    Great tut, very nifty.

    But I encounter a difficulty in IE7.

    I enclosed the menu (need to restyle it still) in a div container with no height cause that differs per page. The CSS ‘overflow:hidden’ param cannot be used otherwise if one of my dropdowns is longer then my container div it will be cut of at the bottom of the container, for some reason.
    So dropping the ‘overflow’ param did the trick for FF, Chrome & safari, but offcourse not in IE7.

    It doesn’t matter which modification i tried in the CSS
    in IE7 it still cuts off the dropdownmenu.

    example: http://213.144.240.197/wifac/index.asp

    Is this a bug in the jquery and CSS compliant source for the same reason rounded corners don’t work? Or can this be solved with CSS markup

    Any suggestions? Please let me know.

    Thnx

  109. Michael on November 19th, 2009 at 1:21 pm

    This is poor user experience. Navigation is one of the most important areas of a home page. Would you leave it to user guesswork as to choose the little arrow for all your sub navigation? The top nav text and the arrow and the whole button state should do the same thing> expose the sub navigation.

  110. Jason on November 20th, 2009 at 7:52 am

    Has anybody been able to get this to work with the actual button rather than just the arrow??

  111. Jason on November 20th, 2009 at 8:23 am

    Ok people, I just figured out how to append the function “hover” to the text button and got rid of the empty span tag for the trigger. (At least this works for me!)

    $(“ul.subnav”).parent().append(“”); //Remove the “span tags”

    $(“ul.topnav li”).mouseover(function() { //add a.trigger to the end like: ul.topnav li a.trigger

    Then all you have to do is add the class “trigger” to the main navigation button you want to have a dropdown for like this:

    Tutorials

    This works perfectly for me in Firefox 3.5 & Safari 4 on a mac. Haven’t tested yet in IE, but worked fine prior to adding this code so I can’t image it not working in IE.

    • Jason on November 20th, 2009 at 8:25 am

      I don’t know why my response just got screwed up

      the link should read:

      Tutorials

    • lupir on January 2nd, 2010 at 10:20 am

      Is it me, or is this still not working on Firefox 3.5.6 on MacOSX 10.5.6 (Leopard) ? Not drops down, not even when clicking on it.

    • lupir on January 2nd, 2010 at 11:29 am

      Is it me, or is this still not working on Firefox 3.5.6 on MacOSX 10.5.6 (Leopard) ? Nothing drops down, not even when clicking on it.

      (you’re not deleting this comment are you?)

  112. Key on November 20th, 2009 at 5:15 pm

    Hello, I love your navigation that you made! I used it on my static website, but I am converting it to the Joomla CMS. I was wondering if you would know how to adapt this navigation to work as my main navigation for my Joomla site. In case it helps to see my Joomla site it is under construction at: http://www.roche-inc.com/Joomla/

    Thanks ahead of time for any help you can give me,
    Key

    • Jason on November 23rd, 2009 at 4:39 pm

      I would image if its anything like drupal & wordpress, you would have to hand-code it into your theme. And make sure all of the css makes it into your style sheet for that theme. Joomla from I hear is a tougher CMS to theme. Good luck.

      • Key on November 24th, 2009 at 9:15 am

        Yea, it seems to be difficult to theme, it makes it even more difficult that to do any kind of advanced theming, you have to know PHP, which I don’t at the moment. I took the drop down menu that was provided with one of the themes you get with Joomla and took the images from this drop down to give it somewhat the same look. It isn’t exactly the same, but it has the glowing hover, but not the drop down arrow and effects like this one. I am currently working on learning PHP to try and do a better job of creating my theme.

        Thanks for the reply,
        Key

      • John Evans on July 31st, 2011 at 10:11 am

        Change the .subnav to .children in both the CSS and Jquery.

  113. DARKe on November 24th, 2009 at 1:07 am

    Simple Amazing and beautiful simple as that.

  114. cataleptic on November 29th, 2009 at 5:26 am

    Hi,
    this is a great menu, but I have a problem with it.

    I created Home and Clothing, clothing has submenu to itself, with two links, 1)football, 2)basketball
    but when I click on either of the sublinks, the top level menu with the arrow does not appear next to Clothing.

    I did everything as the tutorial says, but still nothing.

  115. Marcus on November 30th, 2009 at 12:02 pm

    hi,

    I have a CSS menu positioned on my page directly below this jquery menu; when the jquery expands the menu items and i scroll down the menu i see the CSS links behind it and they are activated when hovered over – is there a way i can bring the jquery menu to the front and overylay my CSS.

    Thanks and rgds

    Marc

    • Key on December 2nd, 2009 at 5:23 pm

      I have had a similar problem before with some menus, What worked for me was applying a z-index of 100 (or more if the menu you want it above is a z-index of more than 100) to the dropdown li’s (in the css). That should work. Good Luck!

  116. Carmen on December 4th, 2009 at 4:51 pm

    That’s Hot!!! I live jquery even more!

  117. Jan Ole Peek on December 10th, 2009 at 10:50 am

    This menu is awesome. Simple, sleek, and elegant and it works in IE! Thank you!

  118. Vampal on December 10th, 2009 at 10:49 pm

    Nice, thanks for sharing

  119. Mike on December 17th, 2009 at 5:55 am

    If I open Resource menu and then move the mouse down, the Tutorials menu opens and then they both slide closed. Sometimes they’ll then open and close randomly. Similarily, if I open the Tutorials menu and move the mouse outside, the Resource menu opens and then they both open. It works when I view your page, but not mine. Any ideas?

  120. Clayton Correia on December 17th, 2009 at 11:24 am

    Ok guys here’s what I’ve come up with

    This should trigger the drop down on a TEXT LINK mouseover…using this on a current project. Seems to work find but I’ve only tried in firefox

    $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

    $(“ul.topnav li a”).hover(function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(“ul.subnav”).stop().slideDown(‘fast’).show(‘slow’, function(){
    $(this).height(“auto”);
    }); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find(“ul.subnav”).stop().slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });

  121. C3 Customs on December 18th, 2009 at 12:17 am

    Amazing, truly a breath of fresh air, keep up the innovations.

  122. Adam on December 19th, 2009 at 10:09 am

    Very nice! I like the transition effect on the submenu not really seen this around much on navigations

  123. Jontek on December 21st, 2009 at 11:11 am

    Can You upload zip archive? Please!!

  124. scorpio on December 23rd, 2009 at 2:56 am

    Hi fulks
    I have seen this link http://www.sohtanaka.com/web-design/examples/drop-down-menu/
    but there is no round corner on the bottom of the drop down menu.

  125. webdev on December 24th, 2009 at 10:21 am

    How can a person update a jQuery menu from a central file (like XML for example) if the html “ul” and “li” menu structure must be pasted from page to page? How do you update the menu if you have, for example 50 pages, without having to edit page by page and not being able to use Server Side Includes?

  126. sachin on December 27th, 2009 at 6:32 am

    Tihs is amazing

  127. rc on December 28th, 2009 at 4:26 pm

    I am STILL having problems with some funky z-index issues at this site in IE7…Can anybody help? All my z-index’s are in the order i want (works everything BUT IE7) Does anyone have any solutions? Thanks in advance!

  128. Joseph Griffin on December 28th, 2009 at 11:11 pm

    Really nice menu. Thanks for sharing!

    • chaba on January 12th, 2010 at 10:08 am

      Hello Joseph,
      Sorry to bother you :)
      Just saw your comment about the Sexy Drop Down menu and since you seem to know what you are talking about I thought of asking you just how this menu could be implemented?
      I design and create my own webpages but I am no programmer – so without clear instructions I am just left with relying in HTML :)

      I know there are 3 elements to this menu but I don’t know how they are supposed to be connected. Would you be able to advise?

      Greatly appreciated,
      Chaba Tamasi
      Toronto, ON

  129. Neven on December 28th, 2009 at 11:28 pm

    I Just wonder how to use this tutorial in ASP.NET Web Application Using c# in Visual Studio 2005 ? And How to create a dynamic menu loaded from database with it ?

  130. Leo on December 31st, 2009 at 9:11 pm

    NICE. I would like to try it. Thanks…

  131. michael on January 4th, 2010 at 12:05 pm

    How did you get the rounded corners to only appear on the last item in the drop down?

  132. Damn on January 5th, 2010 at 12:07 pm

    What the heck….you didn’t even show us how to import the .js file or the jquery framework into the head…not everyone knows jquery, it would have only taken you a few extra steps to show us properly. And where did the span tag come from all of the sudden? It wasn’t in the first step of the HTML.

  133. Amanda on January 5th, 2010 at 7:32 pm

    Slick tutorial. I like the look and functionality. Eager to try it out. Thanks!

  134. WebDeCode on January 7th, 2010 at 10:30 am

    Since the menu is composed of an html “ul” and “li” menu structure… how would the menu get updated from a central file?

  135. Jerm on January 8th, 2010 at 7:10 pm

    Couldn’t you just replace the little arrow with the image of your button and use mouse over instead of click as your javascript action to get a hover instead of the arrow click?

  136. Pusparaj on January 9th, 2010 at 11:45 pm

    Very nice nav and tutorial. Thanks.

    • chaba on January 10th, 2010 at 3:50 pm

      Beautiful design indeed :)
      For those of us new to the world of jQuery; would you be able to attach to the Step-by-Step instructions – what files need to be created?

      Ie: Step 1. Create a new HTML file with the subnavigation.

      Step 2. Create a new .css file and name it….

      Step 3. (this is where I get lost >>> where does this STEP 3 supposed to go? To its own new file? Into the body of the HTML code??

      Please advise,
      Thank you!

      • Dan Smith on April 28th, 2010 at 6:26 am

        Hi Step 3,

        You will need to save step 3 as a .js file (javascript) example jquery.js

        you will then need to point to this file in your html file (between the

        tags)

        Hope this helps

  137. kariem on January 11th, 2010 at 8:21 am

    great work, you should make it support multi-level, i mean more than two levels

  138. Xiaofeng Wang on January 14th, 2010 at 2:00 pm

    Hello Guys,

    A Really Nice Menu. And I improve this to support multiple levels. I also dynamically create menu items in ASP.NET. If you’re interested, review it here: http://www.leoworks.net/jinglecat/post/sexy-drop-down-menu-2010(en).aspx .

  139. Courier Express Team on January 16th, 2010 at 9:01 pm

    Great tutorial!!

  140. Atasözleri ve Anlamlar? on January 18th, 2010 at 12:49 am

    Perfect working and amazing! Thank you for all Noupe.

  141. Adam B on January 18th, 2010 at 1:03 am

    Simply amazing, this is one of the best jquery navigations! Thanks!

  142. ansar on January 19th, 2010 at 1:43 pm

    hi, I have used this script for my friends site. But when I click on a subnav link when the page opens, the arrow is missing and I cannot click to get the subnav up. Am I the only one with this problem?

    Please take a look at the problem here:http://www.masivpromotions.com/

  143. James on January 21st, 2010 at 5:36 pm

    Nice tutorial and menu. My only thought is that having a very small arrow trigger a drop down is very bad UI design. If you have a drop down for a section, don’t seperate it to it’s own small arrow. If you rollover the main menu navigation “Tutorials” or “Resources” then your menu should trigger, not a small arrow beside it. Also, activating via click rather than hover isn’t usually a great option.

  144. lee on January 23rd, 2010 at 10:59 am

    Thanks a lot, will be using this in my up-coming project!

  145. Yanick Belanger on January 26th, 2010 at 3:51 pm

    HELP….
    I’m using this for a client but he doesn’t want the arrows.
    He want it so that when you click on the actual name on the menu bar the drop down will be activated.
    Thanks in advance.

  146. Peter Kahuria on January 27th, 2010 at 10:47 am

    Thank you very much for this tutorial. I tried creating a drop down menu myself and I got stuck using the mouseover/mouse out event. You have used a great trick!

    • Ralf S. on January 30th, 2010 at 1:20 pm

      Hi, Thank for the great menu. Just one question. Is it possible to drop down menu only by mouse over the main nav with out click on the arrow?
      Ralf

      • tom on April 1st, 2010 at 10:06 am

        I just tried this and it worked…

        $(“ul.topnav li span”).mouseover(function() {

    • vinay on April 19th, 2010 at 7:52 am

      this is good it help me lot

  147. P-L Gendreau on January 28th, 2010 at 9:45 pm

    Very sleek menu, nice work! I didn’t really like the clicking part so I slightly modified your code to work with .hoverIntent (which bypasses most of the issues associated with .hover)

    $(document).ready(function(){
    var config = {
    sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
    interval: 100, // number = milliseconds for onMouseOver polling interval
    over: makeTall, // function = onMouseOver callback (REQUIRED)
    timeout: 400, // number = milliseconds delay before onMouseOut
    out: makeShort // function = onMouseOut callback (REQUIRED)
    };
    $(“ul.topnav li”).hoverIntent(config).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });
    });
    function makeTall() { $(this).find(“ul.subnav”).slideDown(‘normal’).show();}
    function makeShort(){ $(this).find(“ul.subnav”).slideUp(‘normal’);}

    • Stephen on February 1st, 2010 at 7:07 pm

      P-L Gendreau,

      I tried making your changes to the dropdown.js and it seems to have broken the functionality. Am I supposed to add your code into a new (seperate) JS file? Is there a way that you can include your JS file for us to see in it’s entirety?

      • Matt on February 2nd, 2010 at 12:25 am

        I too tried this as i would prefer my navigation to not require a click, however, i was unsuccessful in making it work?

      • eka on February 2nd, 2010 at 4:37 am

        TRY THIS IT worked for me

        $(document).ready(function(){

        $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

        $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
        $(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
        $(this).addClass(“subhover”); //On hover over, add class “subhover”
        }, function(){ //On Hover Out
        $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
        });

        });

      • Matt on February 2nd, 2010 at 5:39 am

        Not too sure? The code seemed a little different for me with the ” and my ”
        It didn’t work

      • Shivanand on February 2nd, 2010 at 10:07 pm

        No,the script is not working.

      • HERO on February 16th, 2010 at 8:24 pm

        This script doesn’t work because of the wrong quotes at the end of line 2. Switch the empty pair of “” and you’re set.

      • P-L Gendreau on February 21st, 2010 at 7:31 pm

        As I said, “I slightly modified your code to work with .hoverIntent”, the keyword being hoverIntent. Google is your friend ;)

  148. Basti on February 6th, 2010 at 1:37 pm

    A very nice Tutorial but the script isn’t working ?!
    Please help :)
    tunetek @gmx.de

    • jerry on February 8th, 2010 at 4:38 pm

      view source page from here: http://www.sohtanaka.com/web-design/examples/drop-down-menu/ that should help :-)… If it doesn’t work you might have something buggy with your css. Try commenting out some of your css code that might help you solve the problem too

  149. Aboubaker Nour on February 8th, 2010 at 8:35 am

    Thank you for the tutorial,
    Can I make it just when the mouse hover it the drown menu works ?

  150. Peter on February 10th, 2010 at 10:02 am

    Hi, Thank for the great menu.

    Does this support jQuery UI?

  151. matt on February 11th, 2010 at 6:55 pm

    I was able to get the hove working by adding this as my script

    http://codeviewer.org/view/code:bf9

  152. Virgil on February 14th, 2010 at 5:14 am

    looks nice… i’ll give it a try thanks.

    • Kyle on February 14th, 2010 at 7:28 am

      Eka’s code did work if you want it to drop down when just hovering over the text. Make sure you put a span around the link and then put in this code (I have changed out all the quotes in the code and switched them to apostrophes):

      $(document).ready(function(){

      $(‘ul.subnav’).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

      $(‘ul.topnav li span’).hover(function() { //When trigger is clicked…

      //Following events are applied to the subnav itself (moving subnav up and down)
      $(this).parent().find(‘ul.subnav’).slideDown(‘fast’).show(); //Drop down the subnav on click

      $(this).parent().hover(function() {
      }, function(){
      $(this).parent().find(‘ul.subnav’).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
      });

      //Following events are applied to the trigger (Hover events for the trigger)
      }).hover(function() {
      $(this).addClass(‘subhover’); //On hover over, add class “subhover”
      }, function(){ //On Hover Out
      $(this).removeClass(‘subhover’); //On hover out, remove class “subhover”
      });

      });

      • rafs on March 8th, 2010 at 9:25 am

        you also forgot the between the quotes in line two.

      • rafs on March 8th, 2010 at 9:26 am

        i meant {span} and {/span} (replace { with greater and less than signs)

      • John on August 25th, 2010 at 9:54 am

        PLEASE help me with this. I am trying get this rollover text thing to work. I am NOT an advanced user. I see what you posted, I just don’t know how to add it to what i have. Please help me.

  153. felipe saavedra on February 16th, 2010 at 11:59 am

    muchas gracias.

  154. Vidit Kothari on February 17th, 2010 at 7:54 pm

    It’s a very easy to understand tut.

    Thank You so much!!! :)

    • Tony on March 2nd, 2010 at 8:43 am

      Great menu script, my only problem is I need it to work with older browser versions, i.e. IE6 & IE7. I can’t get the submenu dropdown to display no matter how high I set the z-index property

      Any ideas?

      Thanks in advance

      • Paul on April 29th, 2010 at 8:44 pm

        Are you using transparent PNGs? If you are, it could be the IE Z-Index bug. Try giving the parent element a higher z-index. ie:

        Page

  155. laxman kafle on February 19th, 2010 at 8:52 pm

    can we use this in blogger

  156. Design Dazzling on February 22nd, 2010 at 3:22 am

    Thanks so much for this menu

  157. Tony on March 2nd, 2010 at 8:48 am

    Hi Michael, I can’t get my dropdown menu to display in IE6 or IE7 no matter how high I set the z-index. I see you had no such trouble. Did you have to do anything special?

    thanks in advance

    Tony

    • Michael Giles on March 4th, 2010 at 9:23 am

      Can you send a link to the page you are developing? I’ll try to see what the problem is.

      • chris on July 7th, 2010 at 4:02 am

        Michael, how do I get the drop down working in IE6? All other browsers work fine. I see Tony received an answer. The site I’m developing is http://www.7dma.com. I would really appreciate any help you can give here or email identity1040@yahoo.com.

        Thank you,
        Chris

      • alex on July 7th, 2010 at 3:00 pm

        for those who cannot run this dropdown in ie6&7, the fixing is you should grab the latest the jquery lib. for instance 1.4.2, the 1.3 brunches cannot works in ie 6&7, i met this problem before. Then fixing it after migrating to 1.4.2.
        cheers.

      • Ron Jomer on November 10th, 2010 at 11:56 am

        IE is so hard to work with jQuery! just quit using it! use chrome or firefox instead. even if you figure out how this would run on IE, you will find yourself lost again next time you try other jQuery functionalities. So please just quit using IE. its one of microsoft’s erroneous works! For one, its slow on browsing, it mixup css formatting and it mess up with JQUERY! for god’s sake!!! I hate to say this on microsoft but…IE is made by damn stupid developers! (^_^)v “peace” hehe…

      • Robert N on December 2nd, 2010 at 4:52 pm

        @Ron Jomer: Its not always that simple! Many companies / Schools still use IE6 as the standard browser. I would expect this to change with time but you cant just drop support for IE6.

  158. Carl on March 3rd, 2010 at 5:30 am

    Hi,

    Excellent menu, easy to style, I just have one request. Is there a way to have add level 3 menu options as well. I have tried it, but the level 3 menu appears behind the level 2 menu dropdown.

    Thanks in advance.

    • Jim Tan on April 9th, 2010 at 12:03 am

      I’m looking for sexy menu that support 3rd level submenu.

  159. Eric on March 4th, 2010 at 3:15 pm

    Love this. How would one modify this to pop up instead of down. I want to create a footer menu…. something like facebook has for contacts. Thanks! :)

  160. Evan on March 5th, 2010 at 11:33 am

    Thanks for pointing us to your solution, your JS worked fine for me.

    And thanks for this post in general – I hate drop-down stuff, this saved me loads of time!

  161. Chicago Web Design on March 8th, 2010 at 9:16 am

    Awesome, Im also curious as to what mods you need to make to get this to run up instead of down?

  162. TheShadow on March 9th, 2010 at 6:32 am

    Hi,Nice tutorial.i have added to my website but i don’t see drop down icon.and regarding java script what should be the file name for it?

  163. Kingsofweb on March 9th, 2010 at 9:27 am

    Thank you for this, i have tried also but could not do it, this helps alot!

    Thnak you

    Jon

  164. DJPhilips on March 15th, 2010 at 11:29 am

    I LOVE this tutorial and script. Thank you. I have made some mods for it and even made it a dynamic menu for my custom CMS. I’m having one tiny issue though: For some reason, headers in my content appear stacked above the nav, while the content properly is stacked below. I have even carved out all z-index CSS descriptors site-wide, and still have this issue. Any advice? Assigning a high z-index for the menu didn’t help.

    • teewuane on October 21st, 2010 at 9:43 am

      did you ever find a solution for this? what you described sounds like what i’m running into but only in ie6+7

  165. NPXP on March 20th, 2010 at 11:12 pm

    This is something what everyone should look into. Improving the appearance of their blogs and websites.

    First time attraction can mean a lot in terms of return visitors.

  166. Alex on March 24th, 2010 at 10:44 am

    very nice informative post…..loved it

  167. Mike on March 30th, 2010 at 3:27 pm

    I was wondering where I can get the required background images for the dropdowns and menus. Thanks!

    • Rock on January 14th, 2011 at 12:44 am

      Nice

  168. controlsea on March 30th, 2010 at 11:35 pm

    It looks so sexy.I’ll get to try it~~

  169. James Wilson on March 31st, 2010 at 12:47 am

    the hover works for me too, but i still have a jquery error:

    handler is undefined
    [Break on this error] if ( !handler.guid )

    any ideas?

    • sai on February 28th, 2011 at 6:28 am

      Good Work, But i need one thing when we are click on the down arrow icon, up arrow icon have to display instead of down arrow.

      Is it possible?

  170. James Wilson on March 31st, 2010 at 4:50 am

    i got it working, its the second part of the function causing the error so i commented it out and now my hover works fine and NO errors:

    $(document).ready(function(){

    $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav

    $(“ul.topnav li span”).hover(

    function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(“ul.subnav”).slideDown(1200).show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find(“ul.subnav”).slideUp(500); //When the mouse hovers out of the subnav, move it back up
    });

    // //Following events are applied to the trigger (Hover events for the trigger)
    // }).hover(function() {
    // $(this).addClass(“subhover”); //On hover over, add class “subhover”
    // }, function(){ //On Hover Out
    // $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    },

    function () {
    //
    }
    );

    });

  171. Mike on March 31st, 2010 at 4:54 pm

    Where can I download the source files for this nav bar?

    • bob6993 on March 24th, 2011 at 5:53 am

      Go to the demo and view the source,
      Find the image URL’s in the css at the top,
      add them to the end of the URL and save them!

      ope this helped!

  172. Xavier on April 1st, 2010 at 11:26 pm

    Great drop down menu, i like it

  173. Andrei on April 3rd, 2010 at 11:06 pm

    Hi, I tried the code myself to put it on the forum menu goes up as arrows and a banner appears to them so what now? Please help me, and me trying to make millions and uplodati file on a website please I really need. I do not know HTML and CSS well. I put a code, “notepad” and watched the tutorial and not going to put it. Help me please

    • Diana on January 11th, 2011 at 9:16 am

      Hi, I read ur message. I also a newcomer for HTML-CSS things,…
      Maybe you can share to me the progress about where you learn and do you still follow it until now?

      Help me please

  174. elfo on April 7th, 2010 at 3:36 am

    You might want to consider adding white-space: pre-line; to your elements to prevent overflowing in some browsers (Firefox 3.6.3 for instance).

  175. elfo on April 7th, 2010 at 3:37 am

    … to your elements, that is. You might also want to make a change to the comment filtering system so it replaces with > instead of stripping them completely.

  176. ekom on April 12th, 2010 at 2:48 am

    awesome tuts, just looking for this sexy menu solutions for one of my website project.

  177. Tim on April 14th, 2010 at 6:37 am

    Some of the author’s other tutorials have been really useful for me, but the result for this one is sub-par. The nav menu isn’t user-friendly because you have to click on the parent links instead of just hovering upon them. People expect the latter and, worse, you have to click on the relatively small triggers and not the actual parent links.

    • Jason on July 29th, 2010 at 8:11 am

      Think about this in terms of the iPad/iPhone, though. You can’t hover on those, but you can use this very nice menu to click-and-expand.

      Kudos!!!

      • nev on March 15th, 2011 at 2:35 pm

        Doesn’t work for iPad, because on iPad the menus don’t disappear when you tap the item again – they stay in place.

    • Gideon on December 24th, 2010 at 11:17 pm

      You can pull the spans out and change onclick to onmouseover. Then just change any $(this).parent().find to $(this).find

      Problem solved, worked great for me and I also didn’t want the whole click to drop down function.

      • Gianni on January 6th, 2011 at 10:37 pm

        Hey Gideon,

        That worked great to get the slide down action only on the link, but take a look at what I’m working on here (http://www.niangi.com/kbgtest/tester.html)

        I want the hover state for the main nav to stay when I mouse onto the subnav… any idea how to do that?

        Thanks!

      • 3Dom on January 15th, 2011 at 4:25 am

        Gideon, what you are asking for is only achievable through Javascript and not through CSS alone.
        You will have to add a line of code that changes the default css property ‘color’ for the topnav list item (the bit in the js that instructs the menu to drop down).
        You will then need to add another line of code to the part just after where it instructs the menu to go away when you hover off (css ‘color’ back to original color).

        Let me know how you go.
        I’ll give it a go and let you know.

      • 3Dom on January 15th, 2011 at 4:26 am

        sorry, that was at Gianni

      • 3Dom on January 15th, 2011 at 4:27 am

        sorry, i meant gianni

      • Darren on January 21st, 2011 at 11:21 pm

        Gideon,
        Not sure if the sample code changed or not, but I’m not seeing any “onclick” to change to “onmouseover”.

        I want to do the same as you, but I’m new to changing javascript. Any chance you could look at the source of Website link above (it is the menu code only).

      • dinox on February 8th, 2011 at 4:13 am

        click to mouseover

  178. Boldis Media on April 17th, 2010 at 8:02 am

    Wonderful web coding tutorials, thanks a lot!

  179. James Wilson on April 18th, 2010 at 1:45 am

    My hover menu is a DISASTER in Ie7 with the z-index issues.

    Can anyone help me out please? It’s worth a link back to your site or blog if you do :)

    http://www.enterf1.com/f1-tickets/bahrain.asp

    F1 tickets link at the top of the page is my hover menu.

    Please get in touch via the contact us button if you can help us out!

    • James Wilson on March 8th, 2011 at 1:36 am

      a million people visit my site on the above link from this webpage, but no one could help me with the IE7 issues! please get in touch via my contact link if you can help! :)

  180. Raj on April 19th, 2010 at 2:50 am

    Hi

    I am new to this navigation menu. I am finding difficult to get this navigation to work. Any one can help me with step by step clear tutorials

  181. yashin on April 21st, 2010 at 11:47 pm

    nice , thanks for you great work and help

  182. dogboy on April 28th, 2010 at 5:50 am

    Blue and grey go well together. I don’t like the rounded ‘tube’ look of the menu personally but the colors are ok.

    • dexter on September 24th, 2010 at 5:52 am

      totally agree the colors are okay, the tutorial is about how to create a drop down menu anyway not about how to color menu to make it look nice.

  183. Dan Smith on April 28th, 2010 at 6:20 am

    Thanks for the great tutorial,

    However can someone point me in the right direction to have a sub sub menu?

    Thanks

    • Mike on February 17th, 2011 at 5:32 pm

      I’m trying to implement this as well. Have you had any progress in getting a sub sub menu working?

      • Matt on July 14th, 2011 at 4:13 am

        I’m also looking for this functionality menu –> sub-menu –> sub-menu of sub-menu

        i need at least 3 levels of sub-menus! anyone know how to do it?

  184. Ryan on April 28th, 2010 at 7:58 am

    hi! i really like this nav menu, and the tutorial was excellent. However, i am having a problem with the menu. It wont display over the rest of my content. I have tried altering the z-index, but to no avail. Can someone please tell me how i do this? i’m sure its something simple, but i cant work it out.

    Many thanks

    Ryan

    • Paul on April 29th, 2010 at 8:34 pm

      What’s your content you’re trying to display over? Flash, text, images? If it’s Flash than play with wmode.

  185. AlliClinton on April 28th, 2010 at 9:36 am

    I want to make the drop down menu appears when the cursor is on a menu, not on the side knob

  186. Boldis Media on April 28th, 2010 at 9:50 am

    Very attractive menu, thanks for example!

  187. FutureBon! on May 4th, 2010 at 3:08 am

    Thank you much! Very helpful! I did it as an excercise, and learned more about using jquery. Looks sharp :D

  188. xene on May 12th, 2010 at 8:35 am

    Multilevel support?

  189. Evan Skuthorpe on May 14th, 2010 at 2:03 am

    An awesome tutorial! Looking into getting it to work now!

  190. janis on May 15th, 2010 at 11:45 am

    Very nice tutorial

    but it does break down the function if some one has javablocker like me :s

    to bad the basic menu function doesn’t work any more, if you have a javablocker:(

  191. Riad Meknes on May 22nd, 2010 at 10:23 am

    script doesn’t work even when i added those cotes @ the end any solution please?
    Thank you

  192. Jason on May 24th, 2010 at 7:07 am

    I think I love you, your JS works great for the hover! Thank you!

  193. Mukesh Variya on May 27th, 2010 at 11:59 pm

    Hello,

    I used this code and working fine. But there is problem that it does not work with n level menu.

    I put this code

    Home

    Tutorials

    Sub Nav Link

    Sub Nav Link

    Sub Nav Link
    Sub Nav Link
    Sub Nav Link
    Sub Nav Link

  194. Sandra on May 29th, 2010 at 1:58 pm

    Dont forget to close the tags if you want the effect to work. Its easy to overlook some code, sometimes you just forgets some small characters and the result is not what you were hoping for.

  195. David on May 30th, 2010 at 2:33 pm

    If you want to trigger the drop down on mouseover for the entire link instead of the span… just target the link:

    $(“ul.topnav li a”).mouseover(function() { //When trigger is clicked…

    • Ryan H.R the junior on June 14th, 2010 at 2:36 am

      thanks!… this is very simple.. this works for hover..

    • Chris on August 17th, 2010 at 3:17 am

      HI, I had sussed this, however when using this method, for some reason the onmouse out function does not work unless you go onto the drop down itself then mouse out.

      Any ideas?

    • Drew on October 12th, 2010 at 11:35 pm

      very nice addendum. works like a charm

    • Claire on October 31st, 2010 at 4:10 pm

      Thank you, so simple and works!! :)

    • Craig on December 28th, 2010 at 10:37 pm

      You Rock! Thanks for this code swap!

    • sakara on April 14th, 2011 at 12:45 pm

      mine is
      $(“ul.topnav li span, ul.topnav li a”).mouseover(function() { //When trigger is clicked…

  196. Beth on June 7th, 2010 at 5:44 am

    for those wanting hover without extra markup:

    $(document).ready(function() {

    $(“ul.topnav > li a:first-child”).mouseover(function() {
    $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show();
    $(this).parent().hover(function() {
    }, function() {
    $(this).parent().find(“ul.subnav”).slideUp(‘slow’);
    });
    }).hover(function() {
    $(this).addClass(“subhover”);
    }, function() {
    $(this).removeClass(“subhover”);
    });
    });

    • Mark on July 13th, 2010 at 4:36 pm

      You all must be joking here. All Hover codes that you have pasted doesn’t work properly in FF 3.6.6 . Be sure that you have tested the code before and after posting because it gets me frustrated.

      • Mark on July 13th, 2010 at 4:47 pm

        I meant everybody should add:
        “When copying sourcecode to editor be sure the double quotes and quotes are properly copied”. Most of the time when I copied the sourcecode from this website (website opened in FF) I had to change single quotes and double quotes from italic version to normal – these look very similar but are not the same. BTW the Beth’s code works, just after copying rewrite these double quotes and singlequotes and it is working properly.

  197. Jeffrey Bennett on June 10th, 2010 at 8:44 am

    Great script! I’ll be using this in some of my web design work. Thank you! :)

  198. Paul on June 13th, 2010 at 5:33 pm

    Hi,

    First off, what a lovely looking menu!

    Secondly, I can’t seem to get it to work, and I’ve no idea why… please see: http://www2.thelearningpath.co.uk/

    As you can see, neither the arrow shows, or the drop-down itself. If you view the source, it’s pretty much an exact copy of the tutorial, albeit the images have been uploaded elsewhere. But I still can’t seem to get it to work…

    Any ideas where I’m going wrong?

    • janmejay on January 14th, 2011 at 3:38 pm

      this sight is supported for biginers

  199. Leorajan on June 21st, 2010 at 9:55 pm

    Hi

    Is it possible to use the dropdown code for two menus in the same page. That is one with full menu and the other one for just a single link. pls help me out.

    Regards
    N. Leorajan

  200. Claudio on June 25th, 2010 at 7:42 am

    I would like to implement it in wordpress, can someone help me to do that? Thanks in advance.

  201. jarloszy on June 28th, 2010 at 3:33 am

    i have tried it and it worked perfectly for me. Now, my problem is how to add the dropdown arrows in front of the top navigation links.

  202. Crystal on June 30th, 2010 at 1:24 pm

    My website is not published yet, but have decided to use this wonderful drop down menu! My issue is with the CSS for the – page properties; “body”. I have a background image. How can I get the body_bg.gif image to work? Is there such a thing as dual body css? This is driving me crazy that I can’t figure out how to not override it, or even change the name which does not work.

    Your CSS for body:
    body {
    margin-top: 0pt;
    margin-right: 0pt;
    margin-bottom: 0pt;
    margin-left: 0pt;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    font-family: normal Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;
    -x-system-font: none;
    background-color: #ddd;
    background-image: url(images/body_bg.gif);
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0% 0%;
    }

    My CSS for body:
    body {
    background-image: url(images/background-pagenew.jpg);
    background-repeat: repeat-x;
    }

    Any suggestions of what I might do to fix this major issue?

    • Crystal on June 30th, 2010 at 4:42 pm

      I’ve changed my approach and just added the bar into my background image! I figured out a different way.

      Cheers

  203. Shiri on July 2nd, 2010 at 5:06 pm

    Great resource, thanks!

    • pankaj on February 17th, 2011 at 5:18 pm

      hi wahts your name

  204. Chris on July 7th, 2010 at 4:26 am

    Can anyone tell me how to create a second level fly-out menu from the main dropdown? The examples I’ve seen, such as uinsureme.com, only use one drop-down list per nav button, not multiple lists.

    I really appreciate your patience in helping a newbie.

    Thank you,
    Chris

  205. Amitesh on July 8th, 2010 at 1:25 am

    working in ASP.net C#. this menu is not working properly when it is included in master page otherwise in all other pages its working (aspx, html). Please help

  206. JJ on July 18th, 2010 at 4:31 pm

    Can this code be turned into a mega menu? I need to have a drop down with 2 -3 columns. I like this menu but need to tranform it into what I need.

  207. Lauren Barker on July 20th, 2010 at 12:32 pm

    Nice menu. I have it working great in a site I am designing. Is there a way to make the menu “Drop Up” instead of dropping down? I tried reversing the jQuery calls but that just messed it up. I cant seem to find any other examples of drop up menus on the web. Any help is appreciated! Thanks

    -Lauren

    • Hozey on December 18th, 2012 at 2:18 pm

      As Lauren asked, what needs to be changed to make the menu drop up?

  208. And on July 24th, 2010 at 3:14 am

    Nice menu, but not working when before “html” tag is

    :/

  209. dhamaso on July 30th, 2010 at 8:05 pm

    does not work with z-index property, The menu never positioned above the other elements in internet explorer 6 and 7.
    can you helpme?

  210. cuboid on July 31st, 2010 at 12:53 am

    Really nice. Thanks a lot

  211. Chris on August 7th, 2010 at 9:51 am

    You have a really nice blog, but I can’t find the download link or button to play with these files. Do I have to fish them out manually?

  212. askkuber on August 16th, 2010 at 11:11 pm

    Thanks for ur tutorial can we implement this in our Existing Menu which is TOtally based on CSS and Java Script
    thanks

  213. Ibrahim on August 17th, 2010 at 10:55 pm

    Excellent, thank you,

  214. cmunyao on August 19th, 2010 at 9:48 pm

    this is great. I’ve extended it’s usage to Contao CMS navigation module and everything is working right.

    Am also looking for a another sexy vertical menu that slides down vertically to view the sub menu.Great moment

  215. Amarneethi on August 22nd, 2010 at 5:22 am

    hi

    Im new to js and jQuery. I understand what all the js up there does, expect the following lines

    $(this).parent().hover(function() {
    },

  216. Eros Bein on August 22nd, 2010 at 2:49 pm

    Hi, it`s a cool menu, but how can I delay the mouseover ?

    With $(this).parent().find(“ul.subnav”).delay(1000).hide(50);
    I get problems, because after 5 Klicks it hides at once.

    Thank you.

  217. phpsol on August 25th, 2010 at 12:14 pm

    Hi
    Good solution thanks for that.
    Regards

  218. Megat on August 26th, 2010 at 11:47 pm

    Thanks! Its good to have people who can share about this.

  219. tuanhuy on August 27th, 2010 at 7:19 pm

    Sorry I have tried to view your online demo with chrome, ie8 and ff4, none is working!

    • John on August 28th, 2010 at 6:18 pm

      I have just tested it and it works perfectly. May be something is wrong with your setting.

  220. brijal on August 30th, 2010 at 10:12 pm

    Nice one. I have tried it and it’s working great for me.

  221. Dave on August 31st, 2010 at 5:37 pm

    thanks for the tutorial. i am however finding a lot of confusion. i wish there could be more information about parts of the nav such as the images used in the css part

    • Marian on March 17th, 2011 at 2:21 pm

      In order to get the images, you can right-click (With firebug plugin installed) on the example website > “Inspect element” > CSS tab, and then you go to each image… hold Ctrl + Click, it opens each image and you save it to your desktop, finally you get it into the code ;)

      Hope it helps!

      M.

  222. njmehta on September 2nd, 2010 at 6:56 am

    In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

  223. Fariz on September 5th, 2010 at 11:04 am

    Nice…. Thanks for info…

  224. Pete on September 6th, 2010 at 3:01 am

    Unfortunately doesn’t work in FF 3.6.8 or IE 8 for me.

  225. raza rahil hussain on September 6th, 2010 at 8:00 am

    Hi,
    it’s very nice tutorial, but having some problem, sub link will hide in the slideshow, see the link and please mail me the solution.
    http://www.razzil.com/ask/

    • fazen on September 21st, 2010 at 6:42 pm

      I just add this rule:

      ul.topnav li ul.subnav { z-index: 999; }

      to your CSS and it works! (on Firefox 3.6)

      • Ray on January 31st, 2011 at 5:46 pm

        Thanks for this. Also works in IE8.

      • sakara on April 14th, 2011 at 12:47 pm

        it don’t work on chrome…

      • R129 on May 12th, 2011 at 11:37 am

        problem in IE9 to

  226. Chet Sapovadia on September 7th, 2010 at 10:03 am

    Thanks!! this works fine.

  227. Murcia web on September 7th, 2010 at 11:26 am

    really works… excellent!!

  228. Pablo on September 10th, 2010 at 4:16 am

    muy bueno el tutorial! excelente explicación!!

  229. Exquisitor on September 11th, 2010 at 6:38 am

    how to change script for roll-up by mouse clicking? not by mouse out. tnx

  230. Jimmy on September 11th, 2010 at 11:13 am

    It did not work for me..

    I have the latest jquery included. I copied that images, the css etc.

    It just did not work for me..

    Can someone post a zip?

  231. Anton on September 11th, 2010 at 11:23 am

    Does anyone know how to keep the hover behavior on parent while cursor is in sub menu?

    This in driving me crazy!

    thanks

  232. Snehesh on September 12th, 2010 at 4:47 am

    Thanks Buddy!
    It was quite simple and i got it working easily. Though i am facing some z-index issues in IE.

  233. Tom on September 17th, 2010 at 2:35 pm

    Really nice, and easy to use.
    Would be nice if you included a zip/rar file with all images, etc. for convenience (couldn’t see one on this page), but thanks anyway.

  234. Amanda on September 20th, 2010 at 6:32 pm

    To activate the sub menu via hovering replace:

    $(“ul.topnav li span”).click(function() { //When trigger is clicked…

    with

    $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

    I don’t know any JS/Jquery…just tried that and it worked.

    If anyone knows how to activate the submenu on the Title instead of the menu and wants to post that, it would be great.

    • Javier on September 24th, 2010 at 12:04 am

      After huge issues getting the dropdown menu to stay displayed and stady, first in FF and then IE i manage to get it working.
      adding

      ul.topnav li ul.subnav {z-index:5; visibility:visible;}

      please note that the z-index can be anything greater than the other values this is enough for Firefox/3.6.10

      the visibility:visible; does the trick in IE 7 I have not tested the rest

      I also changed the javascript tag caller
      from (“ul.subnav”).parent().append(“”);
      to (“ul.subnav”).parent().append();
      and the trigger…
      from (“ul.topnav li span”).click(function()
      To (“ul.topnav li a”).mouseover(function()

      By the comments here I hope this helps others.

      the working site is http://www.publimedia.co.uk

      Javier

  235. francesco on September 25th, 2010 at 5:02 pm

    Hi! Very nice work :)
    Is possible open the drpo-down menù when the mouse hover on the label main word (es. “Tutorial”) and not only on the little arrow at the right?

    Thanks very very much!
    bye bye

    • dinox on February 8th, 2011 at 4:36 am

      remove “span” in $(“ul.topnav li”).mouseover(function() {

  236. Sal on September 26th, 2010 at 1:39 am

    It cool and looks elegant

  237. fixzz on September 29th, 2010 at 12:38 am

    hello.can anyone help me..
    how put php post data on this jquery..

    test ?>

  238. Ryan on September 29th, 2010 at 6:39 am

    Where are the image files kept?

  239. Ashton on September 29th, 2010 at 11:13 am

    The only issue I had when implementing a menu very similar to this was a 1px inconsistency between Firefox and IE on the ul.subnav CSS ‘top’ position.

    When the ul.subnav was appearing nicely at the bottom of the topnav in IE, it was 1px higher up in Firefox. Some might say ‘so what’, but 1px is a problem for all those pixel perfectionists.

    To solve this, I changed the fixed pixel top value (top: 35px in this example) to ‘top: 100%’. Using the relative positioning instead seems to work nicely in IE, Firefox, and Chrome.

  240. haz?r çim on September 29th, 2010 at 2:21 pm

    thank you noupe.

  241. rulo çim on September 29th, 2010 at 2:22 pm

    very nice tutorial..

  242. OtelConsulting on September 29th, 2010 at 9:21 pm

    This should fix any z-index issues. Remember in z-index they treat position absolute & relative separately.

    this covers all the position: relative on your page
    add or change

    ul.topnav li {z-index: 999;}

    this covers all the position: absolute on your page
    add or change

    ul.topnav li ul.subnav {z-index: 999;}

    See: Otelconsulting.com we use this menu

    • jack on April 7th, 2011 at 5:36 pm

      how do u center your dropdown menu in ur website?? please help me..

  243. Tahsin Hasan on September 30th, 2010 at 11:29 am

    Hello,

    Let’s see the boxy tab here on tahsin’s garage

  244. Cy on September 30th, 2010 at 4:46 pm

    Great tutorial, I am already doing on this jQuery menu!

  245. CV Writing on October 1st, 2010 at 12:47 pm

    Doesn’t work on ie8 for me… =/

  246. Muhammad Abdullah on October 4th, 2010 at 7:55 pm

    Awesome…really helpful…thanx :)

  247. xing yalong on October 8th, 2010 at 9:31 pm

    Oh the developer, Mother phukar! asshole! you have missed the vital thing…. where to pot the load() function? in head or body???

    • lwp on October 19th, 2010 at 7:11 pm

      Would you please tell us what load() function are you talking about?

      Be nice to put the jQuery code (Step 3 jQuery) in section of the HTML code like this:

      $(document).ready(function(){

      });

      Very best wishes.

      • lwp on October 19th, 2010 at 7:23 pm

        I’m so sorry.

        I meant:

        Put the jQuery code (Step 3 jQuery) in section <head> of the HTML code like this:

        <head>
        <!– whatever here (meta, title…) –>

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

        });
        </script>
        <head/>

        I really hope this has not bothered you.

  248. Jay on October 15th, 2010 at 9:57 pm

    Hello! I got the code working fine, but i was wondering if theres a way to get it to drop down on a mouseover instead of having to click the arrow? Can anyone respond with a working code? Thanks!

  249. Timo on October 19th, 2010 at 6:58 pm

    Jay,

    In the Step 3. jQuery change the event handler “click” for “hover”:

    $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

    HTH

  250. Olivermitch on October 20th, 2010 at 2:55 am

    I am having trouble with this menu in IE6 (in quirks mode). It drops down fine but when it returns it closes and then quickly pops out and back in again. Any ideas?
    Unfortunately I need to force IE into quirks mode to allow text selection due to absolute positioning bug.

  251. Ryan on October 21st, 2010 at 8:54 am

    Would any one know why the JS is putting two empty span tags after the ul.subnav?

  252. Stewart Doxey on October 22nd, 2010 at 4:55 pm

    Brilliant tutorial, thanks for taking the time putting it together!

    Had a few z-index issues but comments from other solved these. My header (which encapsulated the nav bar) had overflow: hidden applied to it so be aware of this if your implementation isn’t working

  253. jc on October 23rd, 2010 at 1:45 pm

    hi, can anyone help me:

    can i make the dropdown return when i click on the arrow again? How.

  254. Syd on October 26th, 2010 at 9:25 pm

    I have no clue if you will get this…but do I put the jQuery on the same html page…or a different page?

  255. leeward on October 26th, 2010 at 11:45 pm

    where can I get all the source code from ?

  256. André on October 27th, 2010 at 3:13 am

    Thanks for the tip, that’s resolved my problem with the dropdown menus

  257. Luca on October 28th, 2010 at 12:51 pm

    To avoid z-index problems with IE6 & 7:

    ul.topnav { position: relative; z-index: 2000; }
    ul.topnav li ul.subnav { z-index: 1000; }

  258. Dimitri on October 28th, 2010 at 8:34 pm

    People, if you dont know how to set up. Dont bother coming here.

    Those who got it working but it hidden or not working in IE6… Simply remove float:left; from ul.topnav

    Works for me.

  259. vidhoo on October 29th, 2010 at 9:56 am

    hello
    nice drop down menu

  260. Jimbo on October 31st, 2010 at 3:11 pm

    Judging from the way this guy write jQuery, and his night profession as a street dancer, I advice anybody who find it hard to modify his code write ur own code, it is much more easier than modifying his sux unflexible codes..

  261. Lars on October 31st, 2010 at 5:58 pm

    Are we free to use the menu on our websites?

  262. chaitu on November 9th, 2010 at 8:08 pm

    hi please tell me the procedure for fitting this menu into any blog please tell me!! and where can we find the background .gif and .jpeg images

  263. Zeth on November 10th, 2010 at 7:55 am

    Hey! This is just what I needed. Is there possibly a way to make it drop down when you hover over it?

  264. Sergio Alvarado on November 12th, 2010 at 5:04 pm

    I got it working with hover over the entire link and a second level navigation….

    Not a veteran coder so if any coders out there want to clean it up PLEASE DO. //works for me though

    Here is the Javascript:

    $(document).ready(function(){

    $(“ul.topnav li a”).mouseover(function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });

    $(“ul.subnav li a”).mouseover(function() { //When trigger is clicked…

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find(“ul.subnav2″).slideDown(‘fast’).show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find(“ul.subnav2″).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass(“subhover”); //On hover over, add class “subhover”
    }, function(){ //On Hover Out
    $(this).removeClass(“subhover”); //On hover out, remove class “subhover”
    });

    });

    Add this at the bottom of the CSS:

    /* added for 2nd level */

    ul.topnav li ul.subnav li ul.subnav2 {
    list-style: none;
    position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
    left: 170px; top: 0px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
    }

    Here is my HTML:

    Home

    Tutorials

    Sub Nav Link
    Sub Nav Link
    Next Level »

    Sub Nav Link
    Sub Nav Link

    Resources

    Sub Nav Link
    Sub Nav Link

    About Us
    Advertise
    Submit
    Contact Us

  265. Sergio Alvarado on November 12th, 2010 at 5:06 pm

    I got it working with hover over the entire link and a second level navigation….

    Not a veteran coder so if any coders out there want to clean it up PLEASE DO. //works for me though

    Here is the Javascript:


    $(document).ready(function(){

    $("ul.topnav li a").mouseover(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){ //On Hover Out
    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

    $("ul.subnav li a").mouseover(function() { //When trigger is clicked...

    //Following events are applied to the subnav itself (moving subnav up and down)
    $(this).parent().find("ul.subnav2").slideDown('fast').show(); //Drop down the subnav on click

    $(this).parent().hover(function() {
    }, function(){
    $(this).parent().find("ul.subnav2").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });

    //Following events are applied to the trigger (Hover events for the trigger)
    }).hover(function() {
    $(this).addClass("subhover"); //On hover over, add class "subhover"
    }, function(){ //On Hover Out
    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

    });

    Add this to the end of your CSS

    /* added for 2nd level */

    ul.topnav li ul.subnav li ul.subnav2 {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 170px; top: 0px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
    }

    Here is my HTML

    Home

    Tutorials

    Sub Nav Link
    Sub Nav Link
    Next Level »

    Sub Nav Link
    Sub Nav Link

    Resources

    Sub Nav Link
    Sub Nav Link

    About Us
    Advertise
    Submit
    Contact Us

    • Andres on November 22nd, 2010 at 2:36 am

      Hola Sergio, I can´t see the HTML that you’d posted

    • easton41 on January 13th, 2011 at 4:19 pm

      Your code is great!! Thanks for posting!

      Did you get it to work in ie6? That is the only problem I seem to be having still.

      Thanks!

    • Dimart on April 6th, 2011 at 1:06 pm

      Superb, Sergio!

    • Villain Baroque on April 15th, 2011 at 6:25 pm

      Excellent Work, Sergio. Thank you fur figuring that one out.
      Thank you for posting it.

    • Grant on June 29th, 2011 at 2:22 pm

      Awesome. I knew that if I persevered and kept reading, somebody’d get that sorted. Well done, it’s working for me now.

      Good adjustment to a nice menu.

  266. online surf shop on November 12th, 2010 at 7:19 pm

    Love it! That thing seriously looks awesome!

  267. Brett Anderson on November 22nd, 2010 at 4:04 pm

    Nice add on for any site. Sexy indeed!

  268. rb on November 28th, 2010 at 8:13 pm

    Hi, very nice tutorial. I want to make a menu like you did, but I do not need the drop down menu. I’m new in css and do not understand what parts of CSS is for the submenu. If I do menu without the drop down menu, do I have Jquery? Can you please explain how I do it? You can send replies to my email if you wish.
    Thank you very much!

  269. Sub Elahi on December 10th, 2010 at 11:38 am

    Oh it is really sexy :D

  270. Carlos on December 13th, 2010 at 2:41 pm

    The background images used in the CSS should be included with this tutorial (at least for the drop down menu).

  271. dhanesh mane on December 15th, 2010 at 5:40 am

    Hey hey thanks a lot for the script and such a brief details. saved lots of time.

  272. buddhist matrimonial on December 15th, 2010 at 5:44 am

    hey thats cool n nice menus man. I would like to use it in my website. thx a lot for sharing.

  273. anjieya on December 15th, 2010 at 9:10 am

    I like it..its sexy..Im beginner, landing in here bcos i see this dropdown look nice. keep work, nice job.

  274. markting-il on December 16th, 2010 at 2:24 pm

    do you know how to install it in blogspot ?

  275. marketing-il on December 16th, 2010 at 8:59 pm

    can i host the code in google ?

  276. nandkishor on December 17th, 2010 at 2:47 pm

    Sexy Drop Down Menu w/ jQuery & CSS menu is not working pl. check this site

  277. Bruce C on December 18th, 2010 at 10:09 pm

    Thank you so much. I am now using these on the Butane Content Management System. It will help clean up the system for our users. Butane’s admin had a little confusion and we decided to clean it up with some menus and went searching the web. I also wanted to incorporate jQuery, so your tutorial was awesome. I look forward to more special effects from noupe.com, especially jQuery tutorials.

  278. marcio1986 on December 21st, 2010 at 3:00 am

    this is some good looking drop down menu. I had a few issues with the z-index on IE8,7,6 but I followed OtelConsulting advice to use this:

    ul.topnav li {z-index: 999;}

    ul.topnav li ul.subnav {z-index: 999;}

    and that solved the problem (thx a lot OtelConsulting, u save my life)

    and I also had a strange prob on Chrome where the triggers would appear below the menu, but I managed to fix that to.

    I’m making a new layout for my website but, u can see the menu working here: emulegion.info/dropmenu/newbanner.php

    thx for the menu its awesome, and OtelConsulting for the help with the IE issue.

    • kostas on July 2nd, 2011 at 1:22 am

      I have the same problem with trigers.. The are apearing below menu. How did you fixed it?

      Thanks

  279. Yaniv Ran on December 23rd, 2010 at 1:02 am

    Really wanted to thank you and Sergio for doing all of this, since it’s exactly what I was looking for, and it enabled me to implement the menu type I was looking for without using external controls in our Kentico CMS.
    It was challenging to get the CMS to generate the classes I wanted, but once I managed to, it was a breeze :)

  280. ????? on December 26th, 2010 at 1:21 pm

    Very nice drop down menu, thanks for share

  281. tflanagan56 on December 29th, 2010 at 3:10 am

    I like the drop down but can not get the the javascript to work… If any has time to help that would great.

  282. Annelies on December 30th, 2010 at 5:23 pm

    Hello,

    Is there any possibility that you can change:

    $(“ul.topnav li span”).click(function() { //When trigger is clicked…

    So the submenus are visible on mouseover? (not on click)

    Thanks

  283. jcubic on December 31st, 2010 at 8:20 pm

    When you click down arrow when sub menu is open it should close it.

  284. boingonline on January 6th, 2011 at 10:56 am

    Not cool with ie, the conner is not rownded

  285. kif on January 8th, 2011 at 5:47 am

    Thank You Very Very Much!

  286. Chandana Bandara on January 8th, 2011 at 7:00 am

    Thank you . Interesting !!!

  287. Simona on January 13th, 2011 at 11:38 am

    Excellent, thank you!
    Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

  288. easton41 on January 13th, 2011 at 4:17 pm

    Hello
    I was wondering if anyone was able to get the second tier to work in ie6. I have been able to get it to work in every other browser but in ie6 the second tier is getting stuck within the first tier and wont show.

    Any ideas?

    Thanks!

  289. Wilson on January 15th, 2011 at 2:30 am

    Very nice script, it works on IE7, but does not work in Firefox and Safari. I have tried adding z-index to the CSS from the suggestions above and nothing has worked. The menu pushes down my DIV and hides behind the header DIV.

    Has anyone encountered this problem, if so any suggestions would be appreciated.

  290. rakesh ala on January 15th, 2011 at 3:27 am

    Blue and grey go well together. I don’t like the rounded ‘tube’ look of the menu personally but the colors are ok. but I can’t get my dropdown menu to display in IE6 or IE7 no matter how high I set the z-index. I see you had no such trouble.

  291. k1r0n on January 16th, 2011 at 2:40 pm

    Wow it’s great!

  292. Ifeanyi on January 17th, 2011 at 9:28 pm

    wonderful tutorial, i’m looking forward to using it next week on the project i will be working on.

  293. Pacchu on January 18th, 2011 at 3:37 pm

    Hi

    this code works in all web browsers(firefox,ie6,7,8 etc)?. I can make diffrent file for css code or add to same page that contain body part also. please replay me anyone

  294. Stan on January 18th, 2011 at 5:35 pm

    Great Script, but I’m having an issue with the subnav disappearing even without mousing out. It won’t even let me hover over the subnav… it just disappears as soon as I move my mouse down.

  295. Annoying Customer on January 19th, 2011 at 4:53 pm

    I can’t get this to work at all. The menu lines up fine, but in the end the down arrows never show up. (nor is the area clickable) I’ve included both scripts, all images, and all the CSS. It makes no sense to me, but this is a very poorly written “tutorial” either way.

    I’ve implemented many scripts before with jquery, and never had a problem before this one.

  296. Arokia on January 21st, 2011 at 1:12 pm

    Great job…

  297. Amjath on January 21st, 2011 at 8:45 pm

    worked like a charm.. thanks…

  298. DHIVA on January 24th, 2011 at 12:53 pm

    Hi…
    I am a beginner for a JQuery but I have the good knowledge in HTML and CSS.Can anybody send the documents to create the menu

    Regards
    T.Dhiva

  299. Xander on January 25th, 2011 at 10:38 am

    Wonderful menu – LOVE IT.

    Having problems displaying the little arrow.
    IT DOES NOT appear on Opera, Firefox MSIE etc. at all
    The script and pulldown menu works great, but the arrow remains invisible no matter what I try.

    I’m sure it has something to do with some CSS issues – but I can’t figure it out.

    Visit my design (Work in progress): innotec.nu/velkommen/design/nytt/default.asp?lang=no&showw=01.1409

  300. Chris Jokinen on January 25th, 2011 at 5:22 pm

    Hello and thanks for this nice jquery menu. I just wanted to say I was having an issue with the menu producing a horizonal scroll with a blank space on the menus right side. After work with the css I found it was caused by this…
    ul.topnav {
    padding: 0 20px;
    width: 100%;

    }

    Changing the css to a percentage value intruduced the display bug. My fix was to delete the padding from the ul.topnav and change the li below it like so…
    ul.topnav li {
    padding-left:20px;

    }

    Now it works with percentage widths with no problem

    All the Best,
    Chris J

  301. kalenik on January 26th, 2011 at 9:46 pm

    will use this method into my private site! Thank you!

  302. Krivoy Rog on January 27th, 2011 at 7:23 pm

    Thank! Wery good meny

  303. ksaes on January 29th, 2011 at 6:43 am

    Thank you for your article is wonderful

  304. Paul on February 1st, 2011 at 7:23 pm

    Nice menu.
    Is there any way to get this centred on the page?
    Thanks :)

  305. deepak sharma on February 10th, 2011 at 9:30 am

    can’t we make the dropdown list with the cursor move on menu tab ……?

  306. reyad010 on February 10th, 2011 at 12:16 pm

    hey!!!
    thats a really cool stuff…….

    but pls help me a little bit……..

    i did it in blogger and found that everything is fine but one…………no drop down menus…

    i just copied the js in html and also add css part in html editor.
    just copied the html part in html/javascript widget

  307. Hema Ganesan on February 14th, 2011 at 9:48 am

    Nice menu scripting. how to download background images for this sample menu?

    • Mike on February 17th, 2011 at 5:30 pm

      I was able to download them by opening the preview in firefox, select “view page info”, then “Media”, then select images and Save As.

  308. Julen on February 21st, 2011 at 1:15 pm

    Hi!somebody could tell me how to use this sexy menu but in a bottom-bar, I mean, how could I do that the menu apears in the opposite direction, from bottom???

    • Mikel on February 21st, 2011 at 9:40 pm

      Hi Julen!

      Just change “top: 35px;” by “bottom: 35px;” at line 37 (inside “ul.topnav li ul.subnav” selector) in the CSS example provided.

      Good Luck!

  309. Dani on February 21st, 2011 at 8:50 pm

    Very nice, works fine in Google Chrome 9.0.597.98, Firefor 3.6.13, but not at all in IE 9.0.7930. Any fixes for IE9 ?

  310. Vixka Studio on February 22nd, 2011 at 9:21 am

    This article is nice, but how to use it for wordpress theme? :|

  311. saurabh gupta on February 26th, 2011 at 4:10 am

    heya !! Thnxx for such a nice collection..

  312. Sunny Golani on February 28th, 2011 at 8:03 am

    Awesome Man…………. U Rock Buddy. I needed sub menus and Sergio Alvarado rocked…

  313. mudassir zafar on February 28th, 2011 at 11:32 am

    I can’t get this to work at all. The menu lines up fine, but in the end the down arrows never show up. (nor is the area clickable) I’ve included both scripts, all images, and all the CSS. It makes no sense to me, but this is a very poorly written “tutorial” either way.

    I’ve implemented many scripts before with jquery, and never had a problem before this one.

  314. hellsing on February 28th, 2011 at 4:57 pm
  315. hellsing on February 28th, 2011 at 5:43 pm

    So I can’t post code here. I’ll try to show somehow…

    /ul class=”topnav”/
    /li//a href=”index.php”/home//a///li/
    /li//a href=”doc_list.php”/documents//a///li/
    /li/staff
    /ul class=”subnav”/
    /li//a href=”staff_list.php”/full staff list//a///li/
    /li//a href=”staff_edit.php”/add new staff member//a///li/
    // look at the next line!
    //ul//span///span///li/ //
    /li/services/a href=”services.php”/services//a/
    /ul class=”subnav”/
    /li//a href=”forum.php”/fórum//a///li/
    /li//a href=”zart.php”/zárt anyagok//a///li/
    //ul///li/
    /li//a href=”kapcsolat.php”/a M?helyr?l//a///li/
    //ul/
    //div/

    • hellsing on February 28th, 2011 at 5:49 pm

      And the problem is:

      If I have a topnav /li/ element with a line of text (a title) but without an /a/ tag, the script puts an empty pair of /span/ elements at the end of the subnav /ul/ element.

      It kills my design. How can I prevent?

  316. Ioan on March 6th, 2011 at 10:41 pm

    Looks great but does it work properly on the apple os? I’ve encountered problems like this before

  317. BlackAnt on March 8th, 2011 at 8:27 am

    expecially for raja, yo gobloke raja dll ae.., mbok yo seng rodok kreatif.., ojo mek download2 thok ae.., aq lho ngetes gk ada 2menit slese.., jalan tuh…, yg kreatif brooo… :) pisss…

  318. sUMAN on March 8th, 2011 at 11:19 am

    nice one……………

  319. Jauia on March 14th, 2011 at 8:11 am

    I like it..
    Thank you for shared..

  320. Martha on March 15th, 2011 at 3:29 am

    Dimitri,
    That’s a bit harsh. Don’t you think? Even though I feel that many of the questions asked were answered many times before they were asked once again, people should be able to learn and ask questions.
    The best way to remember something, after all, is by “getting hurt.” So if they struggle through this process, they won’t be asking question later.
    On the other hand, this is a wonderful tutorial. I, however, haven’t been able to get it to work properly. Thus I am reading the comments to see if anyone has had the same problems. Hopefully I’ll get my issues fixed.

  321. ian bell on March 16th, 2011 at 11:45 am

    Anyone knows how do I go about submitting tutorials on the website

    mypicturesandphotoshop.blogspot.com/

    regards

  322. Ahmed on March 17th, 2011 at 1:24 pm

    Hi,

    I’ve customized and converted it into a dynamic menu for my CMS, all goes well across all IE.

    When I added a SWF within the pages, I’ve noticed a weird behavior when use mac+safari…

    Here is the link:

    http://66.147.244.226/~pegasuss/

    You will notice the weird behavior only when the page contains SWF with mac+safari…

    Appreciate any help..

    Thanks.

  323. Apie on March 17th, 2011 at 6:50 pm

    this is nice…. your explanation is very easy to understand.. i’ve already started using this on my test site.

  324. suprim on March 20th, 2011 at 12:05 am

    thank you so much i have been searching this for long time

  325. ivebo on March 25th, 2011 at 11:08 pm

    nice drop-down menu. well done.

  326. Luis on March 28th, 2011 at 2:31 am

    This dropdown menu is easy to apply.

    I wanted to drop the submenus not by clicking at the arrow, but by putting the pointer over the top link.

    I modified the jQuery selector from:

    $(“ul.topnav li span”).click(function() { …

    to

    $(“ul.topnav li span”).parent().mouseover(function() { …

    Works excellent.

    • Luis on March 28th, 2011 at 4:09 am

      Was not working with more than one submenus. I needed to remove the .parent, inside the function. The whole snippet looks like this:


      $("ul.subnav").parent().append("");
      $("ul.topnav li span").parent().mouseover(function() {
      $(this).find("ul.subnav").slideDown('fast').show();
      $(this).hover(function(){},function(){
      $(this).parent().find("ul.subnav").slideUp('slow');
      });
      }).hover(function(){
      $(this).addClass("subhover");
      },function(){
      $(this).removeClass("subhover");
      });

      • Brian Wangila on May 9th, 2011 at 3:52 am

        Thanks Luis, you helped me a lot. I however don’t see the need for the first line since the effect is on hover. You no longer need the span, because there is no click.

        Am not that good at jQuery but it works, tell me what you think

        $(“ul.topnav li ul”).parent().mouseover(function() {
        $(this).find(“ul.subnav”).slideDown(‘fast’).show();
        $(this).hover(function(){},function(){
        $(this).parent().find(“ul.subnav”).slideUp(‘slow’);
        });
        }).hover(function(){
        $(this).addClass(“subhover”);
        },function(){
        $(this).removeClass(“subhover”);
        });

      • Kelvin on July 21st, 2011 at 11:24 am

        Thanks Brian and Luis. I got your hack to work, but I needed to keep the append(“”) intact.

        Without:
        $(“ul.subnav”).parent().append(“”);

        the subnav wouldn’t show. But with it, it worked like a charm. My full working snippet was:
        $(“ul.subnav”).parent().append(“”);
        $(“ul.topnav li span”).parent().mouseover(function() {
        $(this).find(“ul.subnav”).slideDown(‘fast’).show();
        $(this).hover(function(){},function(){
        $(this).parent().find(“ul.subnav”).slideUp(‘slow’);
        });
        }).hover(function(){
        $(this).addClass(“subhover”);
        },function(){
        $(this).removeClass(“subhover”);
        });

  327. chris on March 31st, 2011 at 5:25 pm

    hi everybody, i got an issue with the menu: the arrow-down image is repeating in a weird way. i cant figure out how to fix it. normally it should appear beside the subnav only but it also appears 2 times more out of context in another place. having this on ff, chrome and safari on mac, cant check ie.

    thanks in advance,
    chris

    • chris on March 31st, 2011 at 5:44 pm

      i just found the bug: i use typeface-js. in a way its interferring with the menu. i deleted the class from the anchor and now the bug is solved.

      but really, if you experience a strange behaviour with the trigger image you cant find the bug in the css or js. was kinda hard to track down.

      thanks for the great menu!

  328. Liz L Baker on April 9th, 2011 at 1:25 am

    where do i find the “topnav_hover.gif” to save?

  329. krishna on April 13th, 2011 at 10:35 am

    Hi,

    Its great efforts,looks awesome.

    Can you please tell me how to make the tab activate when going by pages.

  330. Arthur on April 14th, 2011 at 5:27 pm

    can you please add an option to add to sub menu -> sub menu? :)

    i.e:
    menu
    –> menu->sub
    ———> sub->sub menu

    thank you

  331. Adam, Lemon Head Design on April 14th, 2011 at 6:03 pm

    Thanks for the tutorial. I think it would be nice to have the dropdown on hover instead of click though. Thanks for the great tutorial.

  332. kopi luwak lampung on April 14th, 2011 at 9:38 pm

    awesome .. thanks for share … loveit

  333. jonathan on April 23rd, 2011 at 1:40 pm

    hi, i had tested on my test blog, but it doesn’t have the drop down menu O,o”

    may guide me on this?

    thanks a lot ^^

  334. Lmax on April 27th, 2011 at 7:28 am

    i got the hover thing, but still not working the jquery effect,
    how can i download the js files :(

  335. alex on May 1st, 2011 at 2:13 am

    hey i love this code, but i have a question, how do i get the subnav_btn.gif?

    do i have to make it or is this a place i can download it? do i have to make both up and down state?

  336. Zia on May 1st, 2011 at 5:36 am

    The name matched with the post smoothly.

  337. Rory Rothon on May 2nd, 2011 at 8:22 pm

    Great advice.
    If you would like to use a hover instead of click, then simply replace any “.click” to “.hover” within the javascript.

    I would then recommend using the stop to stop the menu going crazy on multiple hovers lol

    :::

    $(this).parent().find(“ul.subnavigation”).slideUp(‘slow’).stop(true,true);

    That should work a treat guys ;)

    • Jefferson on May 9th, 2011 at 11:14 pm

      great tips
      thnk you

    • Cesar on May 26th, 2011 at 4:38 am

      thnks for the tip, I was thinking about the first thing, but I didnt actually thought about the second! thnks!

      • Cesar on May 26th, 2011 at 4:40 am

        didnt think… sorry jajaja

  338. YhwhDesign on May 3rd, 2011 at 7:09 am

    Is there a way to add in sub menus for the drop downs?

    Thanks great tutorial!

  339. Stephanie on May 4th, 2011 at 4:40 pm

    Not enough instructions for anyone to setup successfully. This tutorial gets a fail.

  340. King Asmodeus on May 5th, 2011 at 6:58 am

    Hey,the gif’s used over here is not available i guez,where can i find it?

  341. Paul on May 6th, 2011 at 10:24 pm

    I would like to know if its possible to do two things with your script: 1) can hover activate the drop down instead of the arrow, and 2) can this script be implemented into a WordPress site?

  342. Geschenkideen on May 6th, 2011 at 10:49 pm

    Sehr schön informativ. Konnte vieles lernen. Weiter so

  343. Kira on May 8th, 2011 at 10:21 pm

    where can I get the needed images: e.g.”topnav_bg.gif”

  344. Brian Wangila on May 9th, 2011 at 3:27 am

    Am surprised when I see people make useless comments. This is a great straight forward tutorial

  345. Form1 on May 10th, 2011 at 2:40 am

    poor Stephanie.
    were you hoping that the tutorial would perhaps show you how to accomplish this without using a computer? that’s about all that’s lacking.
    same assessment of anyone who can’t seem to download a graphic that they’re presently viewing in their browser.

    this is a beautiful explanation. thanks!
    and it works in the cursed IE6.

  346. Marvio Rocha on May 10th, 2011 at 4:10 pm

    Greet! Very, good, jquery plugin for website menu. :)

  347. Ruben Meibergen on May 11th, 2011 at 2:47 pm

    Wonderful, just wonderful. Thank you for sharing!

  348. web design on May 12th, 2011 at 9:48 am

    Thanks great tutorial!

  349. ?? on May 12th, 2011 at 2:43 pm

    very nice ! I like it!

  350. ozl on May 13th, 2011 at 8:44 pm

    Cant see the icon for dropdown menu when i hover, i uploaded the gif at: http://f.cl.ly/items/0x3C1h2l1E0V1N3l2p2R/subnav_btn.gif on my blog, please help!

  351. ozl on May 13th, 2011 at 10:29 pm

    Nevermind its working now, the problem is that now i cant seem to fit the dropdown on top of the other frames it goes below and not visible…

  352. ozl on May 14th, 2011 at 12:21 am

    Ok so you deleted my blog link and no one will be able to see it, so i have put the blog link using your script on my user name ONLY on THIS post

    Good day people!

  353. Omar on May 14th, 2011 at 5:10 am

    Hi Soh!

    Thaks for your great article, it’s very usefull. I want to include the menu in a joomla artisteer menu, is it posible? what should I do?

    Thanks in advance

  354. Alphonse on May 14th, 2011 at 7:10 am

    This is great. Thanks for taking the time, just what I was looking for.

  355. Dheeraj on May 15th, 2011 at 12:05 pm

    awesome Implementation of Jquery. But one thing i want to ask Which is better in terms of loading time CSS or Jquery.

  356. Zap Media on May 15th, 2011 at 7:13 pm

    Great tutorial, thanks for sharing this.

  357. valery on May 18th, 2011 at 7:18 pm

    Hi,

    When i link the css to the html page I can see it in Dreamweaver but not in any browsers…It´s all blank..

    Can someone help me out?

  358. chileno on May 19th, 2011 at 5:38 am

    in spanish please!

  359. Maryam on May 19th, 2011 at 2:19 pm

    Excellent! One question – I have flash content, and the dropdown menu goes behind the flash content.. what to do? On a blank page experiment, this is an excellent tutorial!!

    • Kim on May 27th, 2011 at 3:50 pm

      Maryam,
      Adding the “z-index” property should fix that. Give a numerical value to it to specify which should be on top of what. The default for all elements on the page is usually “0”, so if you specify a higher value than that for your drop-downs, they would always come on top.

      example:
      .topnav {z-index:999;}

  360. Sarah on May 19th, 2011 at 2:37 pm

    Great tutorial, thanks! Was wondering how I would make the subnav ‘drop’ up, instead of down? Thanks in advance :-)

  361. omartinez on May 21st, 2011 at 12:50 pm

    Great tutorial. I am running into one problem. I am running a JQuery rotating image script on an image right underneath the drop down menu. When the menu drops it falls behind the image. Can I fix that?

    Thank you!!!!!
    Omar

  362. Angela Law on May 23rd, 2011 at 6:00 pm

    Hey thanks for taking the time to do this. Playing with it I found it is not able to handle more than 2 levels.

    For instance Menu Items 1.a. i,ii,iii can never be seen because Menu Item a will not expand for me.

    Now Maybe I made my play sample wrong. But Multiple levels are not working for me.

    Menu Item 1
    Menu Item a
    Menu Item i
    Menu Item ii
    Menu Item iii
    Menu Item b
    Menu Item 2
    Menu Item a
    Menu Item b

    But thanks for your time :)

  363. Angela Law on May 23rd, 2011 at 6:03 pm

    My spacing did not come out on the comment so I will redo.

    I also should have said one level of sub menu allowed. Not 2

    Menu Item 1
    —Menu Item a
    ——Menu Item i
    ——Menu Item ii
    ——Menu Item iii
    —Menu Item b
    Menu Item 2
    —Menu Item a
    —Menu Item b

    Have a good one, Angela

  364. strider on May 24th, 2011 at 7:52 am

    This is such a good work. but the thing is when i run the page it doesn’t appear anything..but it shows in Dreamweaver.
    Can somebody help me…

  365. Eric on May 25th, 2011 at 8:04 pm

    Great script, and coded nicely. No complaints there. The tutorial was straight forward regarding getting the script working on one’s own page.

    However, I don’t feel that this is very friendly regarding customizing. A lot of reverse engineering needs to be done to determine what adjustments should be made. The graphics used were also not included.

    Can’t decide if I want to spend the time customizing CSS or just find another script?

  366. Dave on May 26th, 2011 at 8:11 pm

    Decent tutorial if you wanna create a drop down onclick however what about the majority of what people what which is for the dropdown menu to appear on hover?

    • Kim on May 27th, 2011 at 3:37 pm

      Sorry didn’t mean to post this as a reply to your comment Dave.

      But to answer your question, to have the drop down appear on hover instead of click, then you just replace any “.click” to “.hover” within the javascript.

      ———

      $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

  367. steve b on May 27th, 2011 at 1:20 am

    I’m putting php primary/secondary categories thru this menu comme ca..

    db->executeQuery($query_rsCWGetSubCategories, “rsCWGetSubCategories”);
    $rsCWGetSubCategories_recordCount = $cartweaver->db->recordCount;
    $row_rsCWGetSubCategories = $cartweaver->db->db_fetch_assoc($rsCWGetSubCategories);

    /* first we list the Category name in this loop through the getCategories data set. */
    ?>

    <a class="MenuBarItemSubmenu" href="settings->targetResults . “?category=” . $row_rsCWGetCategories[“category_ID”]); ?>”>

    <a href="settings->targetResults . “?secondary=” . $row_rsCWGetSubCategories[“scndctgry_ID”]); ?>”>

    db->db_fetch_assoc($rsCWGetSubCategories)); ?>

    db->db_fetch_assoc($rsCWGetCategories)); ?>

    The Blog

    About
    Our Team
    Events

    <!– –>

    Works great – except in Explorer – any version – but 9.00 “doubles up” the sub-menu drop downs – it’s driving me crazy…any chance of some help…?

  368. Kim on May 27th, 2011 at 3:37 pm

    Hey, great menu :)

    I had a question about triggering the drop down. You have it set up to add empty span class when the JS is enabled.

    ———-
    $(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled – Adds empty span tag after ul.subnav
    ———–

    The area that you must mouse over to trigger the drop down is currently contained in the top right corner of the .

    How would I go about changing that so that the drop down is triggered when you mouse over the text for that nav link? (ex. when you’d mouse over the word “Resources” instead of the green arrow on the demo)

    If I change the class $(“ul.subnav”) to another class, say “ul.topnav li”, it will trigger the drop down like I would like it too. However, all of the drop downs are triggered at once.

    It seems like it would be a fairly simple thing to achieve, I unfortunately just don’t know enough about JS to get it working. Any help would be appreciated!

    • Cris on May 30th, 2011 at 9:18 pm

      Kim, I’m having the same challenge. Did you find resolution to this?

      • Kim on May 31st, 2011 at 6:33 pm

        Sorry Cris, nothing yet. I’ll post an update if I get it working.

  369. ali on May 29th, 2011 at 1:31 pm

    nice work

  370. JJ on June 3rd, 2011 at 11:23 pm

    Great example. Trying to incorporate portions of the dropdown into my top frame page. However, when hovering over the menu option, the subnav doesn’t display and is cut off by the page that appears in the page below it. Is there a way to cause the dropdown to appear over the frame below it?
    Thanks!

    • JJ on June 6th, 2011 at 5:12 pm

      I guess a better way to describe is I need cross-frame display of these menus. Thanks

  371. Jan on June 4th, 2011 at 6:16 pm

    Hi, just like to know why the top nav is not working when there is a sub nav. Do not see the mistake in the css:

    ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    /*background: #222;*/
    font-size: 1em;
    /*background: url(topnav_bg.gif) repeat-x;*/
    }
    ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*–Declare X and Y axis base for sub navigation–*/

    }
    ul.topnav li a{
    padding-left: 30px;
    padding-top:0px;
    position:relative;
    top:-3px;
    color: #000;
    display: block;
    text-decoration: none;
    float: left;
    }
    ul.topnav li a:hover{
    /*background: url(topnav_hover.gif) no-repeat center top;*/
    }
    ul.topnav li span { /*–Drop down trigger styles–*/
    width: 340px;
    height: 35px;
    position:absolute;
    left:0;
    float: left;
    z-index:1
    /*background: url(../images/subnav_btn.gif) no-repeat center top;*/
    }
    ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*–Hover effect for trigger–*/
    ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
    left: 40px; top: 30px;
    background-image: url(../images/fond_subnav.png);
    background-repeat:repeat;
    border:1px black dotted;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 150px;
    z-index:2;
    /*–border: 1px solid #111;–*/

  372. Chris on June 7th, 2011 at 9:09 pm

    Would anyone happen to know how to make the subnav slide up instead of down? I have a menu at the bottom of the page and i need it to slide up. Any help would be great!

  373. Abdelkader Soudani on June 8th, 2011 at 5:26 pm

    Awesome solution to replace the nasty select dropdown default input
    Very usefull, Thanks for sharing!

  374. Crital on June 9th, 2011 at 7:39 am

    How do I enable the javascript? I believe I did by adding the script to the html page but for some reason it doesn’t work.

  375. racs on June 10th, 2011 at 8:06 am

    Great work!!
    A Quick query i have..
    what if the main items increases to 15-20 (or more then that in case of dynamic entries)? will it give a horizontal scroll or an arrow to show more items?

  376. Alan on June 10th, 2011 at 8:59 pm

    This is great. I love that the arrows will take the user to the category page… super helpful for what I’m looking to do!

  377. Diego on June 15th, 2011 at 1:08 am

    Alguien sabe de donde uno puede bajarse este excelente menu ????
    salute
    Diego

  378. Toyin on June 18th, 2011 at 6:41 pm

    Where can we get the images used in this example? I tried testing the code and I’m not seeing the effects.

    • Omri on July 5th, 2011 at 10:03 pm

      The demo page links to the images, download them from there.

  379. Omri on June 27th, 2011 at 5:33 pm

    How do I make it so you mouseover the menu item and not click the arrow to show the submenu?

  380. camilla on July 1st, 2011 at 6:57 pm

    is a lovely menu, thanks for tuts!

  381. Omri on July 5th, 2011 at 10:02 pm

    You can give each submenu item a bevel effect by inserting:
    “border-bottom:1px solid #111;
    border-top:1px solid #444;”
    into html ul.topnav li ul.subnav li a.

    Also, I modified the menu so that it drops down when you mouseover it, and clicking makes it dropdown/slideup after it’s dropped down from mouseover. Take a look at my website, http://skarab.net/ . The menubar code (minified, sorry!) is in http://skarab.net/js/menubar.js

  382. Annett on July 10th, 2011 at 9:51 pm

    Looks good but shows validation error

  383. Miraç on July 11th, 2011 at 11:09 am

    thank you very much!
    jquery code that worked for me in a section!

  384. Daniel Miguel on July 21st, 2011 at 4:46 am

    I just found what I wanted!

    GREAT JOB. Thanks for sharing!

  385. sumanta parida on July 25th, 2011 at 11:35 am

    very nice manu thanks shearing

  386. Matt on July 28th, 2011 at 5:20 pm

    Great dropdown. I am trying to use the “alternate” version so that the dropdown is triggered by hovering over the entire link anchor, not just the arrow. I have that part working, but all of the subnavs trigger at the same time for any of them.

    I have a development version of the site at http://dingleope.com/_tgf/_dropdown/

    Any help would be greatly appreciated.

    Thanks!

  387. John Evans on July 31st, 2011 at 10:09 am

    For those trying to get it to work in WordPress. Change the .subnav to .children in both the CSS and JQuery snippet. It worked fine for me after changing that.

  388. Shannon Hochkins on August 2nd, 2011 at 3:01 am

    Hey,I have exhausted all my skills in trying to center this menu on the page, and failed, numerous times! Can someone give me a hand in centering the nav bar on the page? the list just keeps breaking!

    • SummaNerd on August 10th, 2011 at 1:39 am

      Shannon without having a link to your site it hards to say but I created a very basic sample page that display how to display this exact menu.
      There are a few basics to centering an element: a defined width doesn’t work if set to auto and margin: {x} auto (replace {x} with a actual quantity like 0, 5px, 1pc, etc)

      if you view the source you’ll see exactly what I did. I did in document styling for this occasion ONLY!
      http://www.mnragland.com/Samples/CenterNav.html

      hope this helps!

  389. Carrie on August 2nd, 2011 at 11:05 pm

    Thanks for this sexy menu. Was using only superfish menu. Will try this next time.

  390. JoelWZ on August 5th, 2011 at 7:20 pm

    I am having trouble getting this to work. The drop downs don’t “drop”. The parent menus all show and when I hover, the highlighting changes, but no drop down. I have tried on IE 9 (without and with compatibility mode) and FF. I have compared the code and it all seems to match. I am generating the list from a database, but the resulting html looks the same.

    Anyone have any idea what I might be missing?

  391. SummaNerd on August 10th, 2011 at 1:20 am

    It’s almost working perfectly except that after I hit the drop down as soon as I move it to the ul.subnav section it hides….idk?

    • SummaNerd on August 10th, 2011 at 1:46 am

      Never mind figured it out the distance of ul.subnav’s top was too far. Not using this exact example, integrated the concept with an existing menu, so an oversight on my part.

      Thanks!!!!

  392. CoolArrow on August 11th, 2011 at 8:40 pm

    Great Tut! I am trying to customize this to be able to open when the text is hovered over and not just the arrow. I accomplished this partially by removing the span from this line:

    /$(“ul.topnav li span”).hover(function() { //When trigger is hovered over…

    Changed to:

    /$(“ul.topnav li”).hover(function() { //When trigger is hovered over…

    But then it opens all submenus in the entire menu. Suggestions?

  393. Drew on August 15th, 2011 at 7:42 pm

    I’m having difficulty getting the btn.gif to work. I’ve made my own button and replaced the URL in the css but it doesn’t act like an object when moused over nor does it register as a clickable object. Thoughts?

  394. Murugan on August 16th, 2011 at 4:41 pm

    I have a website buid asp.net 2008. Is it possible to open asp:casecading drop down using jquery.
    Thanks in advance

  395. Tanvir on August 18th, 2011 at 8:40 am

    Simply awesome, man… keep it up.

  396. amrit on August 18th, 2011 at 10:45 pm

    Very nicely explained………..

  397. Varun on August 19th, 2011 at 7:19 am

    Where is the link to download the necessary files for this tut? As in the backgrouds, arrow style etc..

    • Constantyn on September 6th, 2011 at 1:03 am

      Just open the demo page and save it with .html type with image

      • yishan on December 14th, 2011 at 5:47 pm

        Hi Constantyn, Do you still keep a copy of this demo? His site is down and I need to make this work asap. Thank You!

      • Sherry on December 30th, 2011 at 11:27 pm

        i was also wondering if you had the files.
        THANK YOU

    • Liran on September 7th, 2011 at 1:51 am

      You can save the demo page from your browser and it will include all the pictures shown in the demo.

      • Kenny Roman on October 4th, 2011 at 10:43 pm

        Haha sweet! thanks for the tip!

        This would be perfect for a project of mines to add a ‘logout, edit profile’ links appear under their username.

  398. karan on August 19th, 2011 at 12:23 pm

    great menu

  399. dinesh on August 22nd, 2011 at 8:14 am

    very helpful information thanks for sharing

  400. Abhay on August 22nd, 2011 at 9:06 am

    Excellent ! Can you also add iframe support ? If the menu opens up on a html form, the expanded menu goes behind the form fields …. traditionally, we’ve to add ‘iframe’ behind the expanded menu and above the form dields ( using z-index )

  401. Abhay on August 22nd, 2011 at 9:16 am

    adding z-index:999 to the “ul.topnav li ul.subnav ” style fixed the issue of the pulled down menu going behind the form fields. Didn’t need to add iframe support. But I believe this may not work with the older browser versions like IE 6.0 where we’ll need to add iframe.

  402. gHants | Diseño gráfico - Web on August 22nd, 2011 at 8:57 pm

    Excellent example to make a good menu.
    Thanks.

  403. mahesh tavethiya on August 23rd, 2011 at 3:03 pm

    vary nice manu

  404. Eddie on August 23rd, 2011 at 11:19 pm

    I’ve been trying but I can’t figure it out. Any chance someone can help me make the dropdowns trigger onRollover instead of having to click the arrows?!

    • Vaibhav Bhat on September 5th, 2011 at 12:47 am

      Hey Eddie- simply change your jQuery code. Line 4 is, by default, this:

      $(“ul.topnav li span”).click(function() { //When trigger is clicked…

      Change it to:

      $(“ul.topnav li span”).hover(function() { //When trigger is clicked…

      hope it helps!

  405. smiindia on August 25th, 2011 at 9:02 am

    i like this menus

  406. Ranjith on August 26th, 2011 at 6:11 am

    xcellent ! Can you also add iframe support ? If the menu opens up on a html form, the expanded menu goes behind the form fields….
    ilike this web site & this menu……

  407. Rajith on August 28th, 2011 at 9:46 pm

    Can you please send me the source files of this menu bar. Thank you

  408. Josh on September 1st, 2011 at 7:15 pm

    Is there any easy way to change the jQuery so both the text and the green arrow will expand the sub nav on hover? Rather than having to click on the green arrow, I would like to just be able to hover over either and have it expand.

  409. Chris on September 4th, 2011 at 12:46 pm

    @eddie. Try using:
    $(“ul.topnav .test”).hover(function()
    instead of
    $(“ul.topnav li span”).click(function()
    whereby the “test” class is put in the tag for the li you want the sub nav to appear under
    e.g:
    Tutorials

  410. Dan on September 6th, 2011 at 10:29 pm

    Hello! I am trying to use this in a PHP site, but all I get is a gray mess! Any help would be appreciated…

  411. Laura on September 7th, 2011 at 4:50 pm

    very very good but the images in the CSS were are? I must theese create?

  412. ravenheist on September 7th, 2011 at 5:35 pm

    this is an awesome tutorial

  413. RyanG on September 7th, 2011 at 8:01 pm

    @Dan
    Just replace
    $(“ul.topnav li span”).click(function()
    with
    $(“ul.topnav li a”).mousehover(function()
    In this way the dropdown will show when hover on text but not sure on arrow key. I think just modify the css for it….

  414. Martin on September 8th, 2011 at 8:29 pm

    Hello, I would like to ask if it’s possible to create multiple levels of submenus with this script or it’s just one level? Thank you

  415. winston on September 9th, 2011 at 3:24 pm

    I figured it out. The code below will cause the drop down to appear only if the mouse is stopped for more than 200ms.

    $nlm(“ul.topnav li a”).hover(function()
    { //When trigger is clicked…
    //Following events are applied to the subnav itself (moving subnav up and down)

    $nlm(this).parent().find(“ul.subnav”).stop(true, true).delay(200).slideDown(200); //Drop down the subnav on click *** Changed to Hover

    $nlm(this).parent().hover(function() {
    }, function()
    {
    $nlm(this).parent().find(“ul.subnav”).stop(true, true).slideUp(‘fast’); //When the mouse hovers out of the subnav, move it back up
    });

  416. Arthur on September 9th, 2011 at 6:14 pm

    thank you for this menu
    one question… how can I make the “a” width to be dynamic and always as “ul” width?

    ul.topnav li ul.subnav {…}
    html ul.topnav li ul.subnav li a {…)

    in above styles. the width is fixed :/

    thanks!!!

  417. SHAFICQUE on September 11th, 2011 at 8:36 am

    Masha Allah! good job keep the spirit. you have helped me more than any person in this world

  418. Chris on September 12th, 2011 at 10:47 pm

    Can I get the images you used for the menus, thanks and keep up the great work

  419. Dexter on September 17th, 2011 at 5:50 am

    hmm…… but it does not work. I just saw a menu bar ,but i could not see the sub menu and it also does not hover too. could you upload your sample above so i could download and see full of how it process. Thank…

  420. Saurabh on September 19th, 2011 at 9:04 am

    Hi !! Nice menu !! thanks lot

  421. MiX Web DeSiGn on September 19th, 2011 at 10:27 am

    Hi Soh Tanaka,
    This menu is very nice and I’m using this drop-down menu. What if i want it to drop down automatically when the mouse cursor hover over the drop-down option? Can you help with this? Which part should be modified?

    Thanks you for helping in this! =)

    You have put your very effort into this menu.

  422. Micheal on September 19th, 2011 at 1:26 pm

    I have a question, I know little to nothing about jquery, my question is the code i am pasting in is for jqueryslidemenu using jquery 1.4, I need to have the menu pause or delay for a couple of seconds before disappearing, currently you have to move really quick to the drop-down and then it still sometimes disappears…

    Here is the code from the jqueryslidemenu.js file, please someone help me!

    var jqueryslidemenu={

    animateduration: {over: 200, I TRIED JUST ADDING A delay: 2000, here does nothing
    out: 100}, //duration of slide in/ out animation, in milliseconds

    buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
    var $mainmenu=$(“#”+menuid+”>ul”)
    var $headers=$mainmenu.find(“ul”).parent()
    $headers.each(function(i){
    var $curobj=$(this)
    var $subul=$(this).find(‘ul:eq(0)’)
    this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    this.istopheader=$curobj.parents(“ul”).length==1? true : false
    $subul.css({top:this.istopheader? this._dimensions.h+”px” : 0})
    $curobj.children(“a:eq(0)”).css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(

    )
    $curobj.hover(
    function(e){
    var $targetul=$(this).children(“ul:eq(0)”)
    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
    var menuleft=this.istopheader? 0 : this._dimensions.w
    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
    if ($targetul.queue().length<=1) //if 1 or less queued animations
    $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
    },
    function(e){
    var $targetul=$(this).children("ul:eq(0)")
    $targetul.slideUp (jqueryslidemenu.animateduration.out)
    }
    ) //end hover
    $curobj.click(function(){
    $(this).children("ul:eq(0)").hide()
    })
    }) //end $headers.each()
    $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
    }
    }

    • MiX WeB DeSigN on September 20th, 2011 at 9:01 pm

      Hi Michael, I’m not sure whether you were aware of this reply. If you did not, please look at the code. And find this line in the code of Jquery.

      //———-//
      },
      speeds: {
      slow: 600,
      fast: 200,
      // Default speed
      _default: 400
      },
      //———-//

      Kindly adjust the “slow” to 800 or 900 instead of “600”. The menu should then working for you. =)

      Regards,
      Jornes

  423. MiX WeB DeSiGn on September 19th, 2011 at 10:56 pm

    Hi Michael, So sorry for the previous replied to your question. I did not realize that copied code was your own added code.

    Now,
    I got the solution for this. Look into your code and find this. Line!
    //———-//
    },

    speeds: {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
    },
    //———-//

    Kindly adjust the “slow” to 800 or 900. The menu should then working for you.

    Regards,
    Jornes

  424. george on September 22nd, 2011 at 9:15 pm

    How do I set it up so that the text also drops down the submenu, instead of only the DOWN arrow.

  425. Bilal on September 24th, 2011 at 3:32 am

    Great navbar, It works on chrome and firefox but on IE 9 it showed a small gap (I’d say 2-5px tall) between the topnav and the drop-down menu. I just customized it to drop down on hovering over. What could the problem be?

  426. Predrag Djordjievski on September 26th, 2011 at 1:52 pm

    I have put menu on Visual Force Apex page. Since there the click on TabPanel control on the page doesn’t work. When I remove menu, it works.

  427. Krishna on September 27th, 2011 at 11:53 am

    I like it, thank you very much.

  428. Karissa on September 29th, 2011 at 12:53 am

    How do I set it up so that the text also drops down the submenu, instead of only the DOWN arrow. My client is complaining that her visistors can’t find stuff cause the don’t know to mouse over the arrow.

  429. Lek on September 29th, 2011 at 8:18 am

    Is there an easy way to convert it to wordpress 3.0. I’m having some trouble getting the jquery to work.

  430. Brandon on September 29th, 2011 at 9:48 pm

    Nice, but it is not working in IE8 or IE9 with compatibility view. So the majority of my users are unable to see the menus.

  431. Brandon on September 29th, 2011 at 10:01 pm

    For anyone else having problems in IE8 the CSS for the ul.topnav should be changed from background: to background-image:

  432. MiX on September 30th, 2011 at 7:04 pm

    Hey Ladies and gentlemen. I’m also using this dropdown menu. But it works well on IE7,8,9, Firefox, and Google chrome for me.

  433. Razibul Hassan on October 1st, 2011 at 12:04 pm

    Thanks for the tutorial. This will help create a nice drop-down menu and box instead of traditional basic one.

  434. johanso on October 4th, 2011 at 9:38 pm

    excelente… gracias por este material … Colombia.

  435. Fraz on October 5th, 2011 at 11:43 pm

    Where can you get the source files to get this navigation menu working!?

  436. Patrick Enyia on October 7th, 2011 at 1:36 am

    Yeah.
    Quite explanatory.
    Thanks

  437. banupriya on October 7th, 2011 at 1:16 pm

    Its nice but i want dropdown on mouse over it is not like this sorry

  438. FloFi on October 7th, 2011 at 6:38 pm

    Hi,
    how hard is it to build in another sub-menu level?
    I figured out what I have to change to open the menu on mouse over but I want another menu which opens out of the 1st menu.
    I mean a 2 level submenu..

  439. kevin mulama on October 10th, 2011 at 1:09 pm

    I have been trying out different menus from different tutorials but they all haven’t helped. The webpage appears blank after loading everything. I have tried changing the background colour but nothing has beared any fruits. I am using dream weaver cs5 to prepare everything. I dont like the drop down menu from dream weaver plugins. When i move my mouse over an activity seems to pop up.

  440. Craig on October 11th, 2011 at 12:56 am

    I saved the demo files, but no images. Any way to get them?

    • Patrick on December 1st, 2011 at 12:26 am

      Everyone was a newbie at some point I guess. Open the demo page, view the source (and the source of the CSS file) and work out where the images are stored, then download them.

  441. Pravin on October 11th, 2011 at 5:25 pm

    I want one more level in this case. I have to add sub menus in sub menus and getting very difficulty to implement it. Please let me know if you have any solution.

  442. Thomas on October 14th, 2011 at 12:39 am

    I’m using a MAC, but, I don’t understand how to save the DEMO FILE in order to get the graphics. (Whenever I save it, upon reopening it, I still don’t get the images.) Is there a special way to do that, or another way altogether? Much thanks.

  443. Glen on October 14th, 2011 at 1:05 pm

    Hey, great navigation menu….. I’d love to add a sub menu to the sub menus (a sub sub menu)… But can’t figure out the css. Can anyone help with my request?

    Cheers,

    Glen

  444. shubh on October 16th, 2011 at 10:55 am

    Really a great menu.
    Is it possible to do it a multilevel drop down menu?
    Any help would be appreciated.
    Thank you.

  445. Saket on October 20th, 2011 at 10:47 pm

    fantastic menu…just applied it……..can it be turned into a multilevel drop-down……….a simple reply will do…

    • Joe on November 2nd, 2011 at 6:30 pm

      Hi – How do you convert this to show a third level that pops up to the right of the subnav? Please post the JQuery and css to make this happen. Thanks.

  446. Shefan on October 21st, 2011 at 10:02 pm

    thanks gr8 tutorial …..need some help …can you please tell me how to dynamically populate the drop down list from database ?????

  447. Josine on October 24th, 2011 at 5:05 pm

    Great tutorial!

    Only problem I’m having is that the menu rolls back up even though my mouse is in the sub menu. Anyone else experiencing this problem/got a solution?

  448. Kooanna on October 25th, 2011 at 9:22 am

    nice tutorials, but why not zipping all the content and put it for download like other tutorials? images are not accessible solely…

  449. simon on October 25th, 2011 at 4:53 pm

    Hi,

    How can we expend this menu to include another navigation level like this:

    Home > Section > Cooking

    Thanks :)

  450. Naeem on October 28th, 2011 at 2:54 am

    superb menu! works like a charm!

  451. khotger on November 1st, 2011 at 5:18 pm

    i love the menu, but just tell . what will be the file name of css code and also jquery.
    thanks

  452. Neek on November 1st, 2011 at 6:56 pm

    Hi,

    How can we add another level of submenu (below “.subnav”)? So that it’s 3 menu levels down.

    Thanks!

    N.

  453. z00lu on November 2nd, 2011 at 2:02 pm

    How do you change it so that the dropdown menus appear when the mouse hovers over the words rather than to the side where the arrow button is. I have made it so the sub menu drops on hover instead of click. It doesn’t work so good having to position the mouse to the side of the work. Any help please?

  454. guess on November 4th, 2011 at 7:03 pm

    Hi, i have save the demo as html and after i run it does not show the colour and title of the word, only shown a white space and i have to use mouse to highlight just can see the word. May i know where i get wrong??

  455. visevo on November 5th, 2011 at 7:02 pm

    If anyone wants the navigation to close when a link is clicked, add this:

    $(“ul.topnav li ul.subnav”).click(function() {
    $(this).parent().find(“ul.subnav”).hide();
    });

  456. carrie on November 8th, 2011 at 5:12 pm

    Hi this did not work in opera for me.

  457. Hanno on November 9th, 2011 at 9:47 am

    Hi,

    works great for me. Thanks.
    But there is one problem:
    if I show the menu while a form based view is shown, the menu appears fine, but text box elements remain in the foreground, so the menu is not shown completely.
    Any ideas?
    Cheers

  458. Hanno on November 9th, 2011 at 8:08 pm

    solved it!
    Giving a z-index to ul.topnav li ul.subnav rulez!

  459. Rob on November 10th, 2011 at 5:31 pm

    It’s a great menu, but you basically use the header as the body.. I use my body for everything, so I can get the header to look the way I want when the browser is fully open, but when it’s minimized a little the background behind the header image that is repeated stops and leaves an empty space on the right.. How do I fix that?

  460. rahul on November 12th, 2011 at 3:52 am

    Just for testing purpose… for example do we make two drop down menu in such a way that when user clicks on any of these they expand to show the further content. Clicking one shall not minimize the other ?

  461. Russ Clarke on November 14th, 2011 at 4:28 pm

    Hi I seem to be getting 2 drop down arrows next to each other. How have I done that!!

    cheers

    • Cris on November 20th, 2011 at 11:57 am

      Not sure if you’re still stuck on that problem Clarke, but if you’re using an external CSS file, try including it earlier in your header (before loading JQuery worked for me.)

  462. jon on November 20th, 2011 at 12:14 pm

    Hi

    I am trying to save the images for this but being directed to a 404 page for dropdown_linkbg.gif, :-(, would it be possible to make this available again ?

    Love the tutorial though, I always feel grateful that so many people like you spare the time to post these. For somebody like me who is trying to learn web design/development they are invaluable.

    Thanks

  463. Henry on November 20th, 2011 at 2:45 pm

    Hi,
    I integrated it in my website but its really bad… The animation is all stuttery…
    Pls, I NEED HELP!!

  464. mike v on November 24th, 2011 at 4:15 am

    im trying to use this (format) in a master page for my navigation. I seperated the css into a seperate stylesheet. My default.aspx uses the master file. I render the default.aspx and the style and look is fine, but when i add the script, it runs a debug and at $(document…. says its looking for an object. “error: object expected.

    any thoughts..?

  465. mike v on November 24th, 2011 at 4:43 am

    i put document in quotes..
    $(“document”)..

    and it now works..
    i am completely new to java (jquery) so im not sure why, but whatever works. and if anyone should know why, please advise.

    thx again. love the setup here.

  466. Jacob Oram on November 27th, 2011 at 7:55 pm

    I am new web designer, very helpful post for me so i will try now.
    thanks for this post.

  467. Ario on November 30th, 2011 at 2:09 pm

    thx. very helpful for me ^^

  468. sledjama on November 30th, 2011 at 2:34 pm

    anyone know how i can make a sub-sub-nav out of this, am lost

  469. willya on December 2nd, 2011 at 9:12 pm

    awsome..thanks its very useful for me

  470. matt on December 4th, 2011 at 7:38 pm

    I have this all working fine. Such a great menu.
    Sometimes when I navigate to the page (I’m using Chrome) it pushes the green arrows under and to the left of the menu bar. I refresh again and they go back to the normal place.
    Help!? Any ideas how to stop them moving around ? Thx! : )

  471. Cristian on December 5th, 2011 at 2:46 pm

    Hello, your example it’s great, thanks, but de link example it’s not working, please, can you help me?

    Again thanks,

  472. Robstar on December 7th, 2011 at 1:41 am

    Yes the demo page appears to be down…

  473. K on December 7th, 2011 at 5:44 am

    Anyone have issues with the roll over white light up? It isn’t working for me and I don’t know why, though everything else is..

  474. abner on December 8th, 2011 at 4:29 am

    hi the link for the demo is down

  475. toerti on December 11th, 2011 at 10:07 am

    It always shows all available submenus.
    I have 5 topnav categories and use 2 subnavs.
    When I click one of the sub containing topnavs it shows both subnavs.
    Any ideas?

  476. Kyle R on December 12th, 2011 at 6:54 am

    my link code is ‘Home’ and shows the arrow outside of the hover background image. How can i move it inside? Pretty sure im dealing with this part of the code.

    $(“ul.subnav”).parent().append(“”);

  477. jonas on December 12th, 2011 at 4:59 pm

    For those that wanted the dropdown to trigger on the text also, here is the code i used for that:

    $(document).ready(function(){
    $(“ul.subnav”).parent().append(“”);
    $(“ul.subnav”).parent().hover(function() {
    $(this).find(“ul.subnav”).slideDown(‘fast’).show();
    $(this).hover(function() {
    }, function(){
    $(this).find(“ul.subnav”).slideUp(‘slow’);
    });
    }).hover(function() {
    $(this).addClass(“subhover”);
    }, function(){
    $(this).removeClass(“subhover”);
    });
    });

  478. jonas on December 12th, 2011 at 5:02 pm

    hmm it removed the span tags that should be inside the first append “”

  479. Harshit Laddha on December 13th, 2011 at 6:05 am

    Sorry, i am a newbie thats why don’t mind but, i want to ask that where that jquery thing is to be pasted

  480. yishan on December 13th, 2011 at 8:00 pm

    Hey, Does any one has a demo zip file? His site is down. Very appreciated!

  481. lerie taylor on December 13th, 2011 at 9:02 pm

    The demo page is down

  482. lerie taylor on December 13th, 2011 at 9:08 pm

    Also, none of this worked AT ALL for me

  483. James on December 16th, 2011 at 4:53 pm

    This does not work at all, tried twice. The jQuery does not work and neither does the demo page. Big disapointment considering this is pretty m,uch the number one result on google for jquery dropdown menu.

  484. Robert Bowen on December 16th, 2011 at 10:12 pm

    Sorry that everyone is now having issues with the tutorial. After over two years, and so much use that users have gotten out of it, it is a shame to see this happen. Unfortunately, at this point, our hands are somewhat tied. We hope that Soh’s site will be back online.

    Noupe Editorial Team

  485. kamal mohan on December 17th, 2011 at 5:32 pm

    Demo Link is down. Can you please give a new one.. Thanks..

  486. Robert on December 17th, 2011 at 7:09 pm

    Hello!

    The script works fine for me but I really need the images. Since Soh’s site is down I just would like some kind soul to upload the images for me.

    Best Regards
    Robert

    • James on December 19th, 2011 at 9:57 am

      Hi, what version on jQuery are you using? Could you post any code to pastie.org? Would be a massive help? Thanks

  487. Chris on December 18th, 2011 at 9:01 pm

    Also would like to know if anyone has a zip file or the arrow images for this since it is down.
    Thanks

  488. James on December 19th, 2011 at 9:57 am

    Hi, To people that have it working – what version on jQuery are you using? Could you post any code to pastie.org? Would be a massive help? Thanks

  489. Jessica on December 20th, 2011 at 5:01 am

    I am looking for a way to create an active state for the top level nav buttons. I would like the hover state to remain when the visitor is on the active page. I know how to add the active state in the css, but not to the jQuery portion. Any help would be greatly appreciated.

    Thanks!

  490. David on December 20th, 2011 at 9:31 pm

    Hello People,

    I have it working with my own images, and am using jquery-1.6.2.min
    I am not trying to break the rules, but a working demo can be seen @ webkagawa.com/example/pond/homepage.html or for something simpler
    Good Times.

    David

  491. David on December 20th, 2011 at 9:33 pm

    jquery-1.4.2.min also works.

  492. Greg on December 24th, 2011 at 2:00 pm

    Since Soh’s site is down I thought this might be helpful for anyone that is looking for the working demo. It can be found at ‘htmldrive.net’. Just search for ‘jQuery Super Sexy Drop Down Menu’ and you can see the working demo and download the code files…

  493. n on December 25th, 2011 at 8:12 pm

    Thanks khaled for uploading the html files.

    Thanks for this great tutorial but can some one tell me how to create more sub menus i mean Is it possible to do it a multilevel drop down menu?

  494. Tiffany John on December 29th, 2011 at 4:28 pm

    Nice, thanks for uploading the example

  495. Nick Childers on December 31st, 2011 at 10:29 pm

    Wow thanks for this. This is one of my favorite navigations. I link to the demo is down. Can anyone please upload the images needed for this navigation and post the link?
    Thanks

  496. goodofficer777 on January 2nd, 2012 at 9:15 pm

    Just open the demo page and save it with .html type with image

  497. juxtagonale on January 5th, 2012 at 1:06 am

    your demo page link doesn’t work.

  498. Anshul on January 5th, 2012 at 9:08 am

    Demo page not present…

  499. Lucas on January 7th, 2012 at 9:13 pm

    where i can get the images ? demo not working

    • Me on August 1st, 2012 at 9:47 pm

      It’s useless, doesn’t work. What a waste of time. Link just goes to some Arabic site.

      • steve on August 2nd, 2012 at 4:07 am

        Agreed on the waste of time.

      • Pedro on August 2nd, 2012 at 1:48 pm

        Solution: How about cut n pasting the code he has written to run your own demo. Not a waste of time at all.

  500. amir on January 10th, 2012 at 9:16 am

    how can i make the sub menu horizontal?

    • anand on July 23rd, 2012 at 10:19 pm

      plz let me know, when u able to make it horizontal

  501. Jornes on January 11th, 2012 at 4:48 pm

    This menu is really nice. Love it very much! =)

  502. Nick on January 11th, 2012 at 9:42 pm

    Seems like a very nice drop down menu, but…

    Your demo page link STILL doesn’t work !

  503. adgfx on January 12th, 2012 at 7:37 am

    Demo is not there, i tried the code.. css is rendering but the sub_menu is not active. does it have to do with the image files in the css?? what size r those images.. width & height?

    • Nick on January 12th, 2012 at 10:37 am

      You got it, the submenu is dependant on an image… no image, no dropdown menu :) just use a background: url of an arrow image for ul.topnav li span … i tried it with a width: 15px;height: 10px; one and it does fine for demo purposes

      • Jonny on January 27th, 2012 at 1:44 pm

        I had the same issue as adfgx, but when I tried your solution, it didn’t work. Still no dropdowns. I have a GIF, with the correct file name, and correctly sourced. And tips?

      • Ryan on February 18th, 2012 at 8:15 am

        @ Johnny: I had the same problem you did, and after spending a couple of hours trying different fixes, I realized I did not fully copy the jquery code, and some of it was missing. I re-copy and pasted it and it worked fine. Try looking over your code again and make sure everything is there.

  504. Marc on January 13th, 2012 at 8:28 pm

    Hi guys,

    I couldnt find the images here too, but I used google to find them for me.
    I found an spanish version of this tutorial which presented the images for us

    go here : http://micodigobeta.com.ar/?p=517 let google translate the page for you and at the bottom you will find a link with the download.

    if that doesnt work, use this link : http://www.google.nl/search?sourceid=chrome&ie=UTF-8&q=dropdown_linkbg.gif

    and go through the results to find them.

    Note to the author: Cool post but would be cool to add the images too.

    • Forty Seven on August 21st, 2012 at 11:57 am

      Thank you this is most helpful.
      It worked so now i am trying to play around with it

  505. Anita Clark Realtor on January 14th, 2012 at 11:12 pm

    Excellent…I have just the site to try this menu out on.

  506. monika on January 20th, 2012 at 12:42 pm

    its not working……

  507. Shawn on January 24th, 2012 at 1:14 pm

    Soh’s personal website is offline at the moment due to domain problems therefore the demo will not be working. Follow him on Twitter to get updates on when his website will be up again:

  508. asisin on January 29th, 2012 at 9:30 pm

    The menu works well, but I’m running into some z-index issues. The main content container is obscuring the menu so only the first item in the dropdown shows up. Help!

    • Wayne on January 30th, 2012 at 11:49 pm

      @asisin – The menu needs to be within the same DIV as your content. Put a container around both the menu and your content, and things should work nicely.

      ….
      …..

  509. Werner on January 30th, 2012 at 10:19 pm

    Great work with this plugin!
    I have an issue when i have loaded the jquery easing js, the dropdowns does not hide properly, but i guess ill find a fix

  510. chris on February 1st, 2012 at 9:37 pm

    Links to working demo down :(

  511. Emes on February 3rd, 2012 at 1:50 pm

    No demo, please update

  512. Dat4BIT on February 3rd, 2012 at 9:22 pm

    Thank you for the script!!! I just using for a menu with XSL transform. I have a suggest for this use: change this line of JS

    $(“ul.subnav”).parent().append(“”);

    with

    $(“ul.subnav”).parent().append(document.createElement(“span”));

    for permit the XSL Transform without problems!

  513. artfanvikram on February 7th, 2012 at 7:39 pm

    demo link is down, but i made it work for my purpose. Thank you for the tutorial

  514. Aantninyo on February 8th, 2012 at 10:14 am

    i think , sohtanaka.com already hacked..its redirecting to 80c.com

  515. Tarkesh on February 8th, 2012 at 11:36 am

    Demo page is not working

  516. Ian on February 14th, 2012 at 6:05 pm

    It sure is, redirects to a kids game site – the demo link! not working!

  517. LKM on February 16th, 2012 at 10:57 am

    Are you able to put the demo up on another site/location? be good to see it in action before I implement it..

  518. Sarah on February 16th, 2012 at 8:04 pm

    Demo page link is jacked.

  519. Sascha on February 16th, 2012 at 11:02 pm

    Link to Demo is Down….

  520. Joe on February 21st, 2012 at 11:07 am

    Demo link still not working…

  521. Frai on February 22nd, 2012 at 11:18 pm

    I use this drop down menu in my webapplication but unfortunately in Internet Explorer it doesn’t always work as it should. After clicking on the trigger, the submenu slides down and after you try to click an item in the submenu a lot of times the submenu just moves back up before your can click on an item in the submenu. This problem only occurs in Internet Explorer not in Firefox. Is there any solution for this problem?

  522. Glen on February 24th, 2012 at 6:55 am

    Hey, love this navigation menu, I use it on most of my sites just changing the images and sizes etc. What I’d like to know is how would I go about adding a sub level to an item in the sub menu? A third level sub menu……

  523. Sanjaal on February 25th, 2012 at 1:07 pm

    The demo is down. I created few images required, minifed the HTML/css and made everything working for me. One of the best examples found. I loved it more than Superfish.

  524. gia vang on March 3rd, 2012 at 10:14 am

    Can you submit other link demo? the link you send is not work

  525. SMM on March 5th, 2012 at 6:51 am

    How can I get the download?

  526. Adva on March 7th, 2012 at 2:08 pm

    Demo link won’t work as the author’s domain seems to be down?
    Please let me know when it’s up again, ty.

  527. Siamak on March 16th, 2012 at 2:10 pm

    demo link ?

  528. Josss on March 19th, 2012 at 8:17 pm

    Bad, bad… not working, no link..!

  529. Mohit on March 20th, 2012 at 6:26 am

    It looks great. Kindly tell how can I add this to my blog?

    Thanks

  530. Daniel on March 22nd, 2012 at 10:57 pm

    Great tut! thanks! No demo still. Is there any way I can get the images?

  531. Ryan Coleman on March 23rd, 2012 at 11:09 pm

    I’ll host your demo, please email me.

  532. Dipender Singh on March 26th, 2012 at 9:23 am

    Demo link is going to some other website.

  533. Christiana on March 31st, 2012 at 12:21 am

    This is an amazing drop down menu – thank you! The menu to the website I am working on is on the bottom of the page and I need it to slide up. Can anyone please help me make this drop down menu go up instead of down?

  534. Chris on April 1st, 2012 at 6:13 am

    The demo isn’t working as about 100 other people mentioned, but I’ll get it to work. Much appreciated for your efforts. Any thoughts on a multi-level drop down menu?

    -Chris

  535. Köy Sitesi on April 2nd, 2012 at 8:33 am

    Very nice.. I got it set up and will be using it often. Thanks!

  536. Jones on April 6th, 2012 at 10:13 am

    Round corners also supported in Opera..

  537. Michele on April 14th, 2012 at 4:57 pm

    The demo link is redirected to an arab website…

  538. SmartBoy on April 16th, 2012 at 5:11 pm

    Bad name for nice project !

  539. pallavi on April 18th, 2012 at 7:49 am

    i want SUB SUBMENU…plz help me

  540. pingshan on April 18th, 2012 at 11:34 am

    it’s amazing, i like this style and try to do it in my own blog. thank you!

  541. ss on May 10th, 2012 at 9:09 pm

    this is does not work at all

  542. Markus on May 15th, 2012 at 6:51 am

    is there a way to make the sub menu horizontal aligned?

  543. Amlesh kumar on May 22nd, 2012 at 1:40 pm

    its not working well

  544. Paul on May 23rd, 2012 at 4:56 pm

    Useful as a waterproof teabag.

  545. Rajib on June 11th, 2012 at 9:59 pm

    i want to help for making a drop-down

  546. Robert on June 16th, 2012 at 8:35 pm

    this tutorial is useless without the images and actual demo download. Why go through this and not give everything needed. doesn’t make any sense to me.

  547. revan on June 17th, 2012 at 1:28 pm

    CSS link is not working in this site take care of that.
    I am searching for CSS drop down menus I didn’t get actual page.
    make some modifications to get the actual page what the visitor is searching for.
    But Thanks for your tut…………….

  548. Asad on June 27th, 2012 at 3:05 pm

    nice but demo link not working

  549. Dinesh on June 29th, 2012 at 8:37 am
  550. arif muhammad on June 30th, 2012 at 1:59 am

    good menu,…

  551. Deb on June 30th, 2012 at 1:35 pm

    Thank you Dinesh – found the images and for those of you still not able to make it work, you probably need to add –

    images/

    to the front of the url address for each of the images once you’ve downloaded them from the site Dinesh suggests, and placed them in your images folded. See the full example below:

    ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 2.1em;
    background: url(images/topnav_bg.gif) repeat-x;

    Try it – it’s a great menu once you get it going :)

  552. segxy on July 2nd, 2012 at 8:30 pm

    having problem with how to link the java script wit the page…..so its now making all the functions not to work properly

  553. dhivya on July 3rd, 2012 at 8:28 pm

    demo is not working, if anyone have a proper code means display it pls…

  554. Josh on July 9th, 2012 at 10:54 pm

    How come when my dropdown menu comes down, it all doesnt show and is covered by the image i have below it…How do i make it so that the dropdown menu is over the image?

  555. hamed on July 12th, 2012 at 1:41 pm

    demo !!!!!!!!!!!!!!!!!

  556. Kathir on July 31st, 2012 at 3:24 pm

    Demo is not working

  557. Ernani Azevedo on August 7th, 2012 at 3:05 pm
    • G33X on August 23rd, 2012 at 11:34 pm

      It’s very nice to have the possibility to see how it works!
      Thank you for the link!
      However, Noupe should update the site. It will be more simple.

  558. Jeff on August 9th, 2012 at 6:13 pm

    Looks like you have been hacked. Demos not working.

  559. Rahul on August 12th, 2012 at 3:22 pm

    The Best Jquery i have ever seen

  560. Ben Noureddine Walid on August 30th, 2012 at 11:12 pm

    hi,
    please how can i download orinstall this application menu dropdown menu with jquery
    tahnks

  561. laguna on September 4th, 2012 at 6:18 am

    I use it it and work well. Except no demo and image but can still find at

    http://web.archive.org/web/20110105100331/http://www.sohtanaka.com/web-design/examples/drop-down-menu/

  562. Abolfazl beigi on September 15th, 2012 at 6:09 pm

    thanks. nice

  563. Ahmet on September 17th, 2012 at 7:22 pm

    good menu,…

  564. cyberguy on September 21st, 2012 at 10:06 pm

    works fine on chrome but drop down not working on IE9.any suggestion.

  565. gusmang on October 2nd, 2012 at 5:43 am

    Do you have the final project example in zip file ??

  566. mujeeb on October 31st, 2012 at 6:33 am

    thankx for the help

  567. munavir on October 31st, 2012 at 1:12 pm

    nice

  568. games on November 12th, 2012 at 12:50 am

    very nice thank you but where i can set time out for menu
    thanks

  569. Hans on November 16th, 2012 at 7:37 pm

    What a surprising and nice website here!!! My compliments.

    Hans, The Netherlands.

  570. kamran on November 17th, 2012 at 2:40 pm

    thanks very nice work amzing i try on my site look amazing

  571. Laura on November 28th, 2012 at 8:27 pm

    Can you fix your demo link please?

  572. Gopinath on December 7th, 2012 at 6:50 am

    Wonder full Job!!!

  573. Domenico on December 7th, 2012 at 1:03 pm

    Great work! Thank you for this nice menu.

  574. Archer-Dante on December 12th, 2012 at 12:01 am

    That’s really best usability way to design fully functional horizontal menu.
    Like this way to add “append” method for creating Clickable and ‘MouseOver-able’ parts of one complete navigate bar.

    Ty :3
    btw, 1st link is broken.

  575. Felipe Pereira on December 17th, 2012 at 1:08 am

    i did some changes on the code

    i removed the line that add the

    and changed the next line to:

    $(“ul.topnav li a”).hover(function() {

    so when i’m with the mouse over the text, the sub menu shows up

    i don’t really know how this may affect the rest of the menu, but i think that won’t break it at all

  576. James on December 31st, 2012 at 1:27 am

    Can you fix your demo link please?

  577. Fernando on January 24th, 2013 at 5:09 am

    It’s very nice i want to download this menu. Can any one help me to download this. I also try the above code but it’s not working for me. Am new for this field. Anyone help me?

  578. ColdFusion Developer on January 26th, 2013 at 8:00 pm

    Just a heads up that the demo link is currently broken. Thanks for the tutorial!

  579. AbdouMike on March 2nd, 2013 at 1:18 pm

    Hi,

    Could I have the images files used as backgrounds in this tutorial

    Thank you

  580. leeb on March 4th, 2013 at 12:15 pm

    Demo links broken

  581. peter saurus on April 1st, 2013 at 10:48 pm

    this recopilation of tutorials is simply amazing! keep working hard. i’d like to suggest you to change the color of the form to submit comments to add more contrast; now it’s difficult to see

  582. kalisa on April 8th, 2013 at 7:18 pm

    hey,

    am copying everything same way u did but still can see same thing as in the picture above can anyone tell me please want to do dropdown navigation bar in any possible way!

  583. Mark on April 25th, 2013 at 12:24 pm

    Demo link is not working.

  584. djxiong on June 15th, 2013 at 4:49 am

    hi, for those who still looking for the demo:
    http://www.htmldrive.net/items/demo/147/jQuery-Super-Sexy-Drop-Down-Menu

    you can download the full zip file from:
    http://www.htmldrive.net/items/download/147

  585. John Redhead on January 9th, 2014 at 7:15 pm

    Nice to see the different ways people implement menus, trying to get it the most semantic way they can, and without too many hooks.