Noupe Editorial Team June 2nd, 2009

Sexy Drop Down Menu w/ jQuery & CSS

Kein Beitragsbild

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more...

 Sponsors love


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.

Noupe Editorial Team

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.

747 comments

      1. 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.

      2. 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.

      3. 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”);
        });

        });

      4. $(”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….

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

  1. 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.

      1. 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!

      2. 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.

      3. 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.

      1. 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.

      2. 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.

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

      Also: jquery.easing.js

  2. 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.

  3. 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?

    1. 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.

  4. 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.

    1. 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.

      1. 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.

      2. 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.

      1. 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

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

  6. 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

    1. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

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

  11. 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.

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

  13. 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!

      1. 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 =]

  14. 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.

  15. 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!

  16. 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.

  17. 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

  18. 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.

  19. 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.

  20. 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….

  21. “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.

  22. 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?

  23. 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?

  24. 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.

  25. 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!

  26. 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!

  27. 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”
    });
    });

  28. 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)

  29. 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 :)

  30. 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.

  31. 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!!!!

  32. 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.

  33. 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.

  34. Hi,

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

    Thanks.

    Nick

  35. 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

  36. 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!

  37. 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.

  38. 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!

  39. 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. :(

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

  41. 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!

  42. 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. . .

  43. 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.

  44. 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

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

    Mike

  46. 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.

  47. 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?

  48. 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

  49. 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.

  50. 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.

    1. 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.

    2. 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?)

  51. 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

    1. 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.

      1. 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

  52. 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.

  53. 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

    1. 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!

  54. 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?

  55. 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”
    });

  56. 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?

  57. 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!

    1. 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

  58. 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 ?

  59. 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.

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

  61. 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?

    1. 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!

      1. 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

  62. 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/

  63. 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.

  64. 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.

    1. 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

  65. 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’);}

    1. 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?

      1. 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”
        });

        });

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

    1. 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”
      });

      });

      1. 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.

    1. 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

  66. 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

      1. 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.

      2. 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…

      3. @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.

  67. 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.

  68. 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! :)

  69. 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!

  70. 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.

  71. 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.

    1. 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?

  72. 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 () {
    //
    }
    );

    });

    1. 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!

  73. 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

    1. 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

  74. 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).

  75. … 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.

  76. 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.

    1. 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!!!

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

    2. 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.

      1. 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.

      2. 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).

    1. 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! :)

  77. 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

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

    1. 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.

      1. 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?

  79. 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

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

  81. 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:(

  82. 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.

  83. 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…

    1. 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?

  84. 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”);
    });
    });

    1. 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.

      1. 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.

  85. 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?

  86. 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

  87. 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.

  88. 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?

  89. 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

  90. 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

  91. 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.

  92. 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

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

  94. 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?

  95. 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

  96. hi

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

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

  97. 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.

  98. 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

    1. 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.

  99. 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?

  100. 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.

  101. 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.

    1. 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

  102. 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

  103. 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.

  104. 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

    1. 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.

      1. 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.

  105. 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!

  106. Jay,

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

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

    HTH

  107. 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.

  108. 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

  109. 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.

  110. 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..

  111. 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

  112. 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

  113. 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

    1. 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!

    2. 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.

  114. 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!

  115. 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.

  116. 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.

    1. I have the same problem with trigers.. The are apearing below menu. How did you fixed it?

      Thanks

  117. 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 :)

  118. 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

  119. 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!

  120. 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.

  121. 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.

  122. 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

  123. 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.

  124. 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.

  125. 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

  126. 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

  127. 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

  128. 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

    1. I was able to download them by opening the preview in firefox, select “view page info”, then “Media”, then select images and Save As.

  129. 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???

    1. 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!

  130. 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 ?

  131. 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.

  132. 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/

    1. 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?

  133. 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…

  134. 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.

  135. 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.

  136. 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.

    1. 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");
      });

      1. 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”);
        });

      2. 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”);
        });

  137. 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

    1. 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!

  138. can you please add an option to add to sub menu -> sub menu? :)

    i.e:
    menu
    –> menu->sub
    ———> sub->sub menu

    thank you

  139. 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?

  140. 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 ;)

    1. thnks for the tip, I was thinking about the first thing, but I didnt actually thought about the second! thnks!

  141. 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?

  142. 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.

  143. 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…

  144. 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!

  145. 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

  146. 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?

  147. 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!!

    1. 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;}

  148. Great tutorial, thanks! Was wondering how I would make the subnav ‘drop’ up, instead of down? Thanks in advance :-)

  149. 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

  150. 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 :)

  151. 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

  152. 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…

  153. 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?

  154. 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?

    1. 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…

  155. 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…?

  156. 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!

  157. 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!

  158. 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;–*/

  159. 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!

  160. 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.

  161. 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?

  162. 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!

  163. Where can we get the images used in this example? I tried testing the code and I’m not seeing the effects.

  164. 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

  165. 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!

  166. 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.

  167. 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!

    1. 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!

  168. 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?

    1. 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!!!!

  169. 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?

  170. 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?

  171. I have a website buid asp.net 2008. Is it possible to open asp:casecading drop down using jquery.
    Thanks in advance

      1. 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!

  172. 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 )

  173. 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.

  174. 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?!

    1. 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!

  175. 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……

  176. 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.

  177. @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….

  178. 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

  179. 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
    });

  180. 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!!!

  181. 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…

  182. 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.

  183. 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
    }
    }

    1. 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

  184. 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

  185. 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?

  186. 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.

  187. 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.

  188. 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.

  189. Thanks for the tutorial. This will help create a nice drop-down menu and box instead of traditional basic one.

  190. 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..

  191. 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.

    1. 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.

  192. 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.

  193. 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.

  194. 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

  195. Really a great menu.
    Is it possible to do it a multilevel drop down menu?
    Any help would be appreciated.
    Thank you.

  196. fantastic menu…just applied it……..can it be turned into a multilevel drop-down……….a simple reply will do…

    1. 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.

  197. thanks gr8 tutorial …..need some help …can you please tell me how to dynamically populate the drop down list from database ?????

  198. 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?

  199. nice tutorials, but why not zipping all the content and put it for download like other tutorials? images are not accessible solely…

  200. Hi,

    How can we expend this menu to include another navigation level like this:

    Home > Section > Cooking

    Thanks :)

  201. Hi,

    How can we add another level of submenu (below “.subnav”)? So that it’s 3 menu levels down.

    Thanks!

    N.

  202. 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?

  203. 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??

  204. 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();
    });

  205. 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

  206. 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?

  207. 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 ?

    1. 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.)

  208. 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

  209. 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..?

  210. 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.

  211. 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! : )

  212. Hello, your example it’s great, thanks, but de link example it’s not working, please, can you help me?

    Again thanks,

  213. 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..

  214. 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?

  215. 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(“”);

  216. 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”);
    });
    });

  217. Sorry, i am a newbie thats why don’t mind but, i want to ask that where that jquery thing is to be pasted

  218. 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.

  219. 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

  220. 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

  221. 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

  222. 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!

  223. 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

  224. 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…

  225. 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?

  226. 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

      1. Solution: How about cut n pasting the code he has written to run your own demo. Not a waste of time at all.

  227. 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?

    1. 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

      1. 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?

      2. @ 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.

  228. 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.

  229. 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:

  230. 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!

    1. @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.

      ….
      …..

  231. 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

  232. 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!

  233. 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?

  234. 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……

  235. 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.

  236. Demo link won’t work as the author’s domain seems to be down?
    Please let me know when it’s up again, ty.

  237. 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?

  238. 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

  239. 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.

  240. 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…………….

  241. 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 :)

  242. having problem with how to link the java script wit the page…..so its now making all the functions not to work properly

  243. 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?

    1. 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.

  244. 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.

  245. 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

  246. 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?

  247. 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

  248. 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!