Create a multilevel Dropdown menu with CSS and improve it via jQuery

Some of you might have noticed, I have a partiality for sleek menus. As I recently had to create a multi level dropdown menu for one of my customers, I wanted to improve it with a little bit of jQuery, but couldn't find a script that accomplished what I needed.

So I decided to build this menu from scratch and share my thoughts as well as the code with you.

So before we start: this is what we are going to build

The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.

The CSS-only menu is cross browser tested and from what I can tell works with all browsers except for IE6.
The Internet Explorer needs the addition of our jQuery function to work properly.

To create a CSS-only dropdown menu that works without Javascript (even in IE6), you need tons of extra markup and CSS, if you really need this for any reason check out Stu Nicholls CSSplay, he addresses this problem with heavy (ab)use of conditional comments =)

Now that you have a little bit of background information, lets create our own menu:

First of all we need the XHTML Structure of our soon-to-be terrific menu. We will use a nested list for this purpose, top level list id is "nav":

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

Thats it for the HTML part; without CSS styling our menu looks like this: Step 1

Now for the stylesheet part:

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }

This removes the indents browsers tend to make, as well as the bullets from #nav and all its child-ul elements. The "position:relative" is needed since we will arrange some of the contained elements with position:relative and absolute. This is necessary since relative and absolute positioned elements are positioned according to their containing blocks with a position attribute, other then static.

Line-height defines the height of each list item. You could set the height attribute for your list-items to define their height, but line-height will center the link text vertically without the need to play with margins and paddings.

 #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

This one is pretty straight forward:
it will style each hyper link in our menu a little bit. At this time the menu looks like this: Step 2

Now lets add some more styles:

#nav li{
    float:left;
    position:relative;
}

This will align our list elements horizontally.

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}

This will position the nested Lists right beyond the main menu and give them a width of 12em. The width attribute is needed so that the list items within display vertically again. The Top attribute should have the same value as the line-height attribute we defined for #nav.

#nav li ul a{
    width:12em;
    float:left;
}

This will set the width of the hyper links to 12 em (which in combination with the width of the UL set above results in a horizontally displayed sub menu, despite of the ongoing float:left)

#nav ul ul{
	top:auto;
	}	

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

#nav ul ul and #nav li ul ul define where we display the sub menus.

The hover states define which items we want to show when hovering over an item (only the next sub level, not all of them)

After applying these styles we got this menu: Step3

If you are working with a browser other than IE6 you should have a basic dropdown menu now.

Gogo jQuery!

So lets spice up the menu a little bit. First of all here is the whole jQuery Code I used to create the effect:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){
	mainmenu();
});

Step by step description:

$(" #nav ul ").css({display: "none"}); // Opera Fix

This is a small fix for Opera, which doesn't hide the menus fast enough, if you hover above them and so creates a flickering effect. $(" #nav ul ") is the jQuery way to select all unordered lists in #nav. Usage of this is similar to selecting CSS elements. The .css({display:"none"}) sets the display attribute for all Unordered lists to none.

$(" #nav li").hover(function(){ // here goes mouse over effect
                  },function(){ // here goes mouse out effect
                               });

This is the jQuery function for hovering. Really simple to use: first function lets you define what happens when you hover over a specific item( in our case a list item), second function is used for the mouse out event.

$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);

This function finds the first hidden unordered list within the currently hovered list item and shows it. The function ".show" works only under specific circumstances, this is why we set the display to none. The number between the braces defines the animation speed in milliseconds.

$(this).find('ul:first').css({visibility: "hidden"});

This is the mouse out event: we use visibility instead of display since the show function mentioned above, sets display to "block" at the end of the animation. This way if you would hover just a short moment over the item the item would not display for the ongoing animation and then pop out all of a sudden. Using visibility prevents this flickering.

 $(document).ready(function(){
	mainmenu();
});

This function will call our mainmenu() function as soon as the html document is ready.

We are done now, if you can't get this to work for any reason, here is a working example for download:

Download Includes: HTML File, CSS File, Javscript Files

Have fun creating your own menu ;)

Update :

I have added some small fixes to the script which were suggested by some of my readers, so thanks for adding improvements. ;)

Another thing I wanted to note: I have seen this script in many templates and wordpress themes now, often used in conjunction with one of wordpress automatic list generating features (wp_list_categories, wp_list_pages)
If you use it that way wordpress adds a title attribute to each link, which can create a flickering effect when the browser tooltip for the title appears. If you are using the script this way you should add the following line of jquery at the beggining of the script to remove the titles:

$(" #nav a").removeAttr("title");

(Last updated 18.09.2008)

Add to Digg Add to del.icio.us Add to StumbleUpon Add to technorati

Responses to “Create a multilevel Dropdown menu with CSS and improve it via jQuery”

Roshan Burnham June 18th, 2008 at 9:48 pm
Hello,

I wanted to drop this line to let you know that I really appreciate this tutorial and couldn't be more thrilled with the timing of your post.

I recently implemented a suckerfish drop-down menu on a site that I am currently building, but was concerned 1) with how to create multiple-drop-down's and 2) "suping up" the otherwise bland style of the menu. Although had I really sat down and thought about the prospect for multiple-drop downs, seeing a more seasoned professional such as yourself post this helpful tutorial has emboldened me with the confidence to pull it all off.

Thank you!

Roshan Burnham
Janko June 18th, 2008 at 10:38 pm
Nice tutorial. I like code hover effect, very good idea!
Costin June 19th, 2008 at 5:58 pm
Thumbs up for this great example. (I really like its unobtrusivity ;-) )
Kriesi June 20th, 2008 at 1:58 am
Glad you like it guys ;)
Steven June 20th, 2008 at 5:54 pm
I was in the exact same predicament as the first poster! I implemented the suckerfish menu but I kept screwing it up every time I tried to style it my own way. Nothing seemed to work in IE6!! Wish I found your tutorial earlier – before I bought the CSSwriter for $50 yesterda – because it looks like good one. Thanks
Aaron June 20th, 2008 at 5:58 pm
This is great!

Can you use other effects like a fade or slide down?

Can you make the dropdowns transparent?

Also do you think this could implemented for a vertical nav that has menus the open to the left?

Thanks and great tutorial!
curtismchale June 21st, 2008 at 5:13 pm
Very slick. Thanks for taking the time to make this available. I have bookmarked if for later reference through evernote. I have been beefing up my CSS abilities and this is a good jump for me.
Kriesi June 22nd, 2008 at 12:19 am
Aaron: Yes to every one of your questions: a vertical fly-out menu would need a reworked css file whereas effects like fade or slide-down only need some configuration of the jQuery script. Basically you only have to change the .show(400) function to .fadeIn(400) or .slideDown(400)

To display the menu transparent you have to change a little more:

you must delete the opera fix line and change
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

to

$(this).find('ul:first').css({opacity:0, visibility: "visible"}).animate({opacity:0.8},400);
Gavin Doolan June 23rd, 2008 at 10:35 am
Fantastic, I was looking for an updated suckerfish menu. I will be implementing this on a new site I'm developing in Drupal. I will let you know how I get on, but if all goes well this will be an awesome addition.

Thanks for the extremely well detailed post. Must have been time consuming to put together.
Dhea Novanda June 25th, 2008 at 11:31 am
Thank you for your great tutorial…. :D
Majesticskull June 25th, 2008 at 2:47 pm
Very nice solution! Thanks!
But it's make submenus staying side by side instead one on top of another? My English is very bad, but I hope that I understand.
Majesticskull June 25th, 2008 at 3:07 pm
I again :)
It's possible make like this?
http://users.tpg.com.au/j_birch/plugins/superfish/multi-tier-all-horizontal-example/
But using your simple code. Thanks again!
Kriesi June 25th, 2008 at 3:21 pm
Not easily done with my code since we use two different techniques:
I hide the submenu with "display: none" whereas the other script hides the submenu by positioning the UL outside of the view port (top:-999em)

You would need to rewrite every file (CSS, HTML and Javascript File) to make this work.
Majesticskull June 25th, 2008 at 4:11 pm
Okay, thanks for the help!
mrbill June 25th, 2008 at 10:00 pm
When creating CSS menus that are based on a list, is there any way to get around having to modifying every html file if you need to modify the menu?
JakeZ June 25th, 2008 at 10:52 pm
Is there any way to use this with proto or scriptalicious?

I am using them and would like to keep the weight down.
Jonathan June 26th, 2008 at 2:59 am
I tried to implement your menu on a site im working on and the drop down is going behind a div in IE 6/7. If you email me I will send you a link to the site though it is a site I'm working on for someone so I can't make it public yet…

Appreciate any assistance you can provide.
Kriesi June 26th, 2008 at 8:38 am
@mrbill: phps include function would solve this problem

@JakeZ: of course you can use prototype, but since I didn't use it for months now I cant help you here. All you need is a basic dropdown or slide up script, shouldn't be to hard to find a tutorial on this topic. From what I remember, the prototype+scriptacolous code would look something like this:
Effect.BlindDown('element_to_display', {duration:2});

@Jonathan: sounds like a z-index problem. just send me the link via contact form, I will take a look.
Gabrielle June 28th, 2008 at 11:33 pm
Thanks – It's always wonderful to see something boiled down to its very essence!
I am new to jQuery and only started to explore it a couple of days ago: so please forgive this probably stupid question.
I understand that adding the jQuery code to your dropdown menu, makes animation effects possible, but why does one still need all of the CSS doing the display: none/block? Why doesn't jQuery take care of this in its hover function?
Thanks for clearing up this fog and greetings from Montreal
Gabrielle
Kriesi June 29th, 2008 at 1:00 pm
Since we want to make the menu work, even with javascript disabled we need these styles to show and hide the different sublevels.

But its true, once javascript is enabled and jQuery is used to display those sublevels these styles are no longer needed.
Gabrielle June 29th, 2008 at 4:50 pm
Thanks :)
Michael Sky June 29th, 2008 at 7:08 pm
Hi, great menu. I've been using the dropdown successfully for a while. Just added a flyout to the page and it's working perfectly on all browsers, except for IE7 (I don't test for IE6 any more).

On IE7 both menus function perfectly except on the flyout, when you mouse down a list of items, the flyout menu closes when you move over the next main menu item.

Tried adding z-index to various pieces but hasn't worked.

Might be something in the jquery script. All I did for the flyout is copy the code for the drop down and then change the div names.

Anyway, it's happening on the above link, the left hand menu, Item 2,

thanks, Michel Sky
Kriesi June 29th, 2008 at 11:37 pm
looks like a CSS problem to me.

From what I can tell from previous implementations I did, you must be very careful with margins, paddings, borders and floats, both in IE6 and 7. Hope this helps…
Vinny July 3rd, 2008 at 10:44 am
Hi,

Great to start to get going with jQuery
I really like this menu and will start to use it.

@ Michael Sky
I changed the last part of the style to
#nav li ul ul {
left:12em;
margin:0px 0 0 0px;
}

to get it running even in IE7. That IE7 did not take the 2nd lvl menupart is because of the gap with the 10px. You don/t see this gap in Firefox
farid July 3rd, 2008 at 6:27 pm
very nice website…..
AndrÃ©s July 3rd, 2008 at 9:47 pm
Hey Kriesi,

First of all, thanks! great menu, and the guide was really helpful. There is one thing though I have ran into that I haven't been able to fix. In IE7, when JavaScript is disabled, the dropdown shows up to the right of the menu title and is rendered useless. If JavaScript is enabled, it works fantastic. FF3 works like a charm too. Is there a chance you could tell me if I did something wrong? http://www.luzvenidera.com.ar/webnueva/menu.php – Thanks a lot again!
Marquis July 5th, 2008 at 4:41 am
Hello

Thank you for this tutorial…

Now, how can I make the drop down on one line?

Thanks
Daryl F July 6th, 2008 at 6:11 pm
Hi Kriesi:

Like the rest of your readers I also thank you for the time and effort you've put into this tutorial, to help us all out. I like the simplicity of the code and the quickness of the response.

I have a simple question. How do you get the main menus aligned in the center of the page. I need a top menu of about 10pixels and then centered horizontally with a width of 800 pixels.

Thank you for your time in responding to my question,

Daryl
Vancouver, Canada
Kriesi July 7th, 2008 at 10:39 am
Hi Daryl,

You can center the menu by applying a fixed width to #nav and then set its margin property to:

margin: 0 auto;
George Mandis July 9th, 2008 at 6:40 am
This works beautifully in every browser for me except for the IEs, including IE7. You can view my implementation at:

http://www.snaptortoise.com

Anyone have any ideas? I'm having a problem similar to what Michael Sky described above, with the submenu disappearing when the cursor leaves the main containing LI.

I would love any suggestions.
delang July 11th, 2008 at 12:31 pm
wow! what a great job. this is what i looking for.
just one question, how to add slideup and slidedopwn effect?
thanks
Kriesi July 12th, 2008 at 10:04 am
basic solution would be:

$(" #nav li").hover(function(){
$(this).find('ul:first').slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}

didn't test it except for firefox, I leave this up to you ;)
Fimbot July 13th, 2008 at 2:25 pm
Beautiful script, but drop-down menus like this are notorious for having major usability issues. They aren't at all user friendly and they hide content to the point that people rarely click on most of the links inside the dropdown menus. So, while it looks really cool, I would add caution in using this script. Unless of course you don't care about people being able to navigate your site, then by all means use it!
Anthony July 15th, 2008 at 11:45 pm
I highly enjoyed your site. My question is where can I get a tutorial to do a menu like on this web page? That's what I would like to ask if I may?
jwright July 16th, 2008 at 1:56 pm
one thing id like to ask is if you could have the box stay there after you mouse over it fer maybe 1 sec after you take the mouse away just so you it would be a lot easiyer just so it dont hide box instantly after you move the mouse off of the menu
Rafael Masoni July 18th, 2008 at 7:32 pm
Wow! Thank you very much!

I wanted something simple that would work when JavaScript is disabled. I tried so many complicated scripts but none of them worked for me.

Thanks to you, now I can go on with the project!
Kyle July 21st, 2008 at 7:49 pm
I love your menu it is the cleanest I have seen. I want to use it but would like to have the color continue to the right the rest of the way across my page. a good visual element separator. I am kinda a novice at css+html. Can I use an and make it fill the rest of the space to the right?
parashanttiwari@gmail.com July 22nd, 2008 at 11:07 am
very nice websiteâ€¦
jason July 22nd, 2008 at 6:07 pm
Wow, good stuff!

Had one question though… maybe 2… if you feel so inclined. This is more along the lines of a CSS question i think but is it possible to have the top level nav "remain" highlighted with the a:hover style at the same time the sub menu is being rolled over? I'm hoping this may give a clear order to the hierarchy of the nav.

Also i tried adjusting the background color of the Top : Sub : & Sub 2 menus to be different for each other but not sure i went about this in the best way. The only way i could get it to work was to assign a .top_parent / .parent / and .child CSS attribute. This ended up being allot of fiddling with the XHTML list. Is there a simpler way to do this?

Regardless on if you choose to answer, thanks so much for teaching such a great navigation!
Kriesi July 22nd, 2008 at 7:01 pm
@ Anthony: I will write one soon if I can spare some time

@jwright; would be possible with setTimeout(). I am sure you will find some nice tutorials out there which can teach you how to use it ;)

@Kyle: I am not sure if i understand, you want the main menu to fill the whole screen-width? just add
#nav{
float:left;
width:100%;
background-color:#333;
}

@Jason: Since CSS offers no way to select a parent or ancestor of an element I think its impossible to let the top level nav remain highlighted without using javascript.

Your second problem is solved rather easy: you don't need additional html classes, you can just use:

#nav a { // top level
background-color:#345678;
}
#nav ul a { // second level
background-color:#23ab45;
}
#nav ul ul a { // third level
background-color:#123456;
}

For each additional sublevel add a unordered list.
jason July 23rd, 2008 at 5:21 pm
Thanks Kriesi for the help!

Thats much more straight forward then what i was doing!

I stumbled upon this CSS drop down (http://phoenity.com/newtedge/horizontal_nav/) that appears to achieve the top level highlight / utilizing tables i think? – not 100% on this. Some major draw backs however is you're limited to one level drops and the biggest draw back is that it doesn't appear to work well with your script!? I thought this might be the work around but unfortunately it appears only to add more problems. Que Sera, Sera..

As for yet another adjustment… i'm making the sub drops that are on the far right side of the nav float to the left in order to contain the nav within a set area and avoid breaking the boundaries of a site's layout. I noticed by adjusting the css…

#nav ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
right: 0; // Flushes to right side (However doesn't exactly line up?)
}

#nav li ul ul {
margin:0px 0 0 10px;
right: 12em; // Flushes Sub Menu to right side (Alignment still a bit off?)
}

I suppose if i assign this a selector like – .farRightNav – i could feasibly apply this anywhere needed…
Maybe?
Ivan Nikolic July 24th, 2008 at 11:21 am
This is a great tutorial, thank you for this!
delang July 26th, 2008 at 6:35 am
maybe how about to make the child appear on left side when it reach end of browser?

how you get what i said.
thanks again
SEOAdsenseThemes.com July 27th, 2008 at 12:54 pm
Currently I'm building a WordPress theme that use Stu Nicholl's CSSPLay Drop Down menu which is purely a CSS solution. And the fact that it is a proven cross-browser pure CSS solution is great.

But I began to use jQuery in my theme, so I've made a decision to finally ditch it and go with a jQuery drop down menu considering jQuery is already in use.

So thanks for the tutorial, it came in pretty handy for me.
SEOAdsenseThemes.com July 27th, 2008 at 2:30 pm
Oh yes, I had to replace all '$' with 'jQuery' in the javascript file to make it work in WordPress.

I can't explain why the workaround in WordPress coz I'm a stranger to jQuery. Does anyone know why?
Krlos July 28th, 2008 at 9:12 pm
VERTICAL MENU ADAPTATION

.verticalMenu ul{
margin: 0;
padding: 0;
list-style-type: none;
/* width: 160px; */ /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

/* Create the box context for the submenues */
.verticalMenu ul li{
position: relative;
}

/*Sub level menu items */
.verticalMenu ul li ul{
position: absolute;
/*width:*/ 170px; /*sub menu width*/
top: 0;
/* visibility: hidden;*/
}

/* Menu links */
.verticalMenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.verticalMenu ul li a:visited{
color: black;
}

.verticalMenu ul li a:hover{
background-color: yellow;
}

/* ——————————————————– */

JAVASCRIPT

function mainmenu(){

$('.verticalMenu ul li ul').width($('.verticalMenu ul').width());

$(" .verticalItem ul ").css({display: "none"}); // Opera Fix
$(" .verticalItem li").hover(
function(){
$(this).find('ul:first').css({visibility: "visible",display: "none", left: $(this).width() + 'px' }).fadeIn(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});

}

$(document).ready(function(){
mainmenu();
});
Krlos July 28th, 2008 at 9:15 pm
HTML

1 HTML
2 CSS
3 Javascript

3.1 jQuery

3.1.1 Download
3.1.2 Tutorial

3.2 Mootools
3.3 Prototype
AUC July 30th, 2008 at 12:27 pm
Good Tutorial! i liked it thanks!!!
Mentmach July 31st, 2008 at 8:23 pm
Great tutorial :
Is there a way to change the font from the css? im changing it to #nav, #nav ul but it keeps showing me a serif font and I want a sanserif font is there a way o do it?
Mentmach July 31st, 2008 at 8:31 pm
pfff nevermid that was a stupid question i was writing font instead of font family hehe awsome nav bad thou thanx a lot
Stephy July 31st, 2008 at 9:08 pm
Hey again Just another question. is it possible to have a rollover button in the main section of the menu to make it look better?
Petr August 5th, 2008 at 2:35 pm
jason question 1:
If you set up hover to li elements then it stay in "opened" state. but don't work in IE6

You also can try
http://snipplr.com/view/2123/suckerfish-dropdown-menus-jquerystyle/
Yuklid August 7th, 2008 at 10:47 am
Nice tutorial! Actually perfect for my freelance work:) But I have a question.

Since its been stated that this has been done in FF, I was wondering if anyone here has already had the fix for IE. I viewed my site on IE and the dropdown part wasn't working. Although it was a good thing that the menu still look normal (only w/out the drop down effect) but if anybody thought of a fix for IE here pls can you email me at yuklidaboganda@gmail.com or just reply:P I would greatly appreciate the help:)
Rick August 8th, 2008 at 9:31 pm
I found using multiple drop down menus (I have four references to ) on the page that only the first will have the jQuery 'opening' effects. The others just pop onto the screen. Any idea why that is?
Gisha August 9th, 2008 at 3:04 pm
Hi
Nice tutorial. I have used this in my site. Just a doubt, how we can change the background color from black to another color.
Thanks
Jess August 16th, 2008 at 5:53 am
You are so awesome! Thanks for sharing this, it was exactly what I needed!

I'm having a bit of a problem though. Although it works in IE, it's shooting the menu off to the right instead of under the button.
http://dualimagephotography.com/services.php

That last one, "galleries" is the drop down. Any idea why?
Hanna August 28th, 2008 at 3:47 pm
I am using this wonderful nav bar for a website I am working on, there are a couple things I am curious about:

1. Is it possible to have the drop down text and line height smaller then the navigation bar itself?

2. How do you get color/image to go across the whole navigation and not just behind the buttons?

Thanks!
Gordon September 5th, 2008 at 7:25 am
Thank you very much for this tutorial. You saved my day… :)
Bri September 6th, 2008 at 7:26 am
Dude,

Your menu ROCKS. I found it while googling – but I must admit – your entire site is pretty sick.

cheers
Pedro W. September 8th, 2008 at 5:17 am
El mejor menu que pude haber encontrado…
Simple y completo.
tenia problemas para actualizar mi menu ya que estaba con java script y usa base de datos pero ahora que estoy usando jquery ps me complique la vida y con este ejemplo ps me cayo a pelo ya que incluso se puede adaptar a base de datos.

gracias muchas gracias.
sigan adelante y felicitaciones por su gran aporte
Martin September 8th, 2008 at 11:09 am
The second level menu (3.1.1 & 3.1.2) is displayed buggy in new IE 8 (beta).

Any ideas how to work around this?
shubelal September 15th, 2008 at 1:12 pm
well done ,Thank you very much for nice tutorial. this tutorial save me a day :)
JohnnyO September 17th, 2008 at 5:12 am
This is great, thank you!

You just saved me an evening of coding :)

-JO
Vincent Le Pes September 17th, 2008 at 8:25 pm
I was having major issues using your method because if you scroll over a link back and forth it queues up animation, resulting in the box fading in and out over and over. Sometimes it would flicker as my cursor was right on the edge of the button, queuing up a lot of animation. After playing around, I found a very easy way to check if the animation was already happening without adding any if statements or timeout functions. All I had to do was check to see if the menu was already visible and only apply the .show animation to hidden elements using the :hidden selector. I would recommend the following simple change for anyone else experiencing this problem:

Simply change this line:

$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

to this:

$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);

I hope some of you find this helpful, and maybe you could even add it to your tutorial.
Kriesi September 17th, 2008 at 10:00 pm
Sounds like a good solution to me although I wasn't able to reproduce this behavior. When I scroll over the links the animation doesn't queue up. Which OS, browser and jQuery version are you using?
Vincent Le Pes September 17th, 2008 at 11:44 pm
I had the issue in FF3 and IE6/7, all running on XP SP2. I had some modifications to the styles that may have something to do with it, I don't know for sure but I'd bet others are having this problem as well. I think it started happening when I switched the animation to fadeIn, but I'm not sure. The final version of mine is below, if you'd like to test it out. I used class="nav-horiz" instead of id="nav" and in some cases styled for menus only within the header, as I will be using this script in multiple places for my current project. I hope you guys find this useful:

———-JS———-

function mainmenu(){
$(" .nav-horiz ul ").css({display: "none"}); // Opera Fix
$(" .nav-horiz li ").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible", display: "none"}).fadeIn(400);
},function(){
$(this).find('ul:first').fadeOut(100).css({visibility: "hidden", display: "block"});
});
}

$(document).ready(function(){
mainmenu();
});

———-CSS———-

/*— Horizontal Navigation Bar —*/

#header .nav-horiz {
position: absolute;
top: 90px;
left: 0px;
width: 760px;
margin: 0px 10px;
background: #43071a url(../images/nav.jpg) repeat-x center top;
border-top: #43071a solid 1px;
border-bottom: #43071a solid 1px;
}
.nav-horiz, .nav-horiz ul {
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
line-height: 35px;
list-style: none;
}
.nav-horiz a:link,
.nav-horiz a:active,
.nav-horiz a:visited {
display: block;
padding: 0px 18px;
border-left: #a04e68 solid 1px;
border-right: #43071a solid 1px;
color: #fff;
text-decoration: none;
}
.nav-horiz a:hover {
color: #cdcdcd;
background: #720D2D;
}
.nav-horiz li {
float: left;
position: relative;
}
.nav-horiz ul {
display: none;
position: absolute;
top: 35px;
width: 182px;
background: #720D2D;
border-top: #a04e68 solid 1px;
border-bottom: #43071a solid 1px;
}
.nav-horiz li ul a {
float: left;
width: 145px;
line-height: 35px;
}
.nav-horiz li ul a:hover {
background: #43071a;
}
.nav-horiz ul ul {
top: auto;
}
.nav-horiz li ul ul {
left: 173px;
margin: 0px 0px 0px 10px;
}
.nav-horiz li:hover ul ul,
.nav-horiz li:hover ul ul ul,
.nav-horiz li:hover ul ul ul ul {
display: none;
}
.nav-horiz li:hover ul,
.nav-horiz li li:hover ul,
.nav-horiz li li li:hover ul,
.nav-horiz li li li li:hover ul {
display: block;
}
Vincent Le Pes September 17th, 2008 at 11:47 pm
Oh yeah: jQuery 1.2.3 :)
Kriesi September 18th, 2008 at 12:10 am
Hey Vincent,
I was able to reproduce the bug with your script. The multiple fade ins happen because you are using the fadeOut function.

To have a real leave animation you have to alter the css as well since on leaving with the cursor, the css instantly kicks in and hides the sub menu items, just before jQuery can show the leave animation.
Therefore the fadeOut is useless at the current state.

Nevertheless I like your fix since it seems to be a good start to make such an animation possible ;)

Another thing I just learned is that the animation always queues up but with no animation for mouse leaving that doesn't matter. Your addition to the code fixes this as well. The whole script becomes a little better through this, so thanks for your suggestion ;)
Vincent Le Pes September 18th, 2008 at 4:44 pm
No problem, glad I could be of help. I am new to jQuery and taking a crash course at my job, and so far it's been very exciting. Tutorials like this and sites like yours have been an indispensable resource, keep up the great posts.

I also noticed the css was happening immediately and ruining the fadeout as well, but I'm not sure how to make the css change queue up after the animation.
Kriesi September 18th, 2008 at 5:15 pm
shouldnt be that hard..

I guess changing

$(this).find(â€™ul:firstâ€™).fadeOut(100).css({visibility: â€œhiddenâ€, display: â€œblockâ€});

to

$(this).find(â€™ul:firstâ€™).fadeOut(100);

should work
Charlie September 19th, 2008 at 6:01 am
Hi Kriesi,

First of all Thanks!!!! That is one of the best tutorials i have come across!! I am very much a novice at this and i was hoping you might have the time to explain in greater detail how to convert this over to a vertical menu. I have managed to set the menu up so it sits vertically, but to get the sub menus to slide out to the right… i am at a bit of a loss.

Many Thanks for any help you can lend
Charlie
TrezÃ£o September 21st, 2008 at 10:46 pm
Guys

to this code works correctly in IE 7 you need input this code in the beggining of the page.

buy
Noor September 30th, 2008 at 8:25 am
Hi,
It really cool I have read many tutorial to creating drop down menu I have found this tutorial best of them all thanks for providing such a nice stuff keep it up

Noor
hocine cheniki October 3rd, 2008 at 11:19 am
goooooooooooooooooood
Ebrahim October 8th, 2008 at 5:00 pm
Excellent plugin, just one thing…

Is it possible to give a the parent menu active class while the dropdown menu is still open?

Currently, parent menus are only regular links with hover styling, as soon as the mouse is moved away, it returns to normal state.

Thanks
Danny October 10th, 2008 at 7:53 pm
Really great tutorial and menu; looks awesome. Can you please post/share the differences for the vertical menu?
Sara Rao October 17th, 2008 at 6:51 pm
Hi Kriesi,
I have worked very hard on developing a website. I made it to look good with the drop down menus working and everything looking good at any screen resolution in both Firefox and IE 7. Then I tested it on IE 6 and everything fell apart. The menu drop downs get hidden behind other div's and the horizontal menu's do not line up the way they should. I want to send u my files and images as an attachment as I currently do not have url to give to you as I haven't uploaded my files on to a webserver. Could you please provide me with an Email address where I can send the html, css and image files as well as snapshots of what the page looks like in IE 7 and IE 6. Please help me as this is an important school project for me. Thanks.
Sara Rao October 17th, 2008 at 6:53 pm
Please help me out !
Thanks
OZ October 20th, 2008 at 8:43 am
how was jonathan's problem solved? I am having the same issue; my menu falls behind another element in the page.
Kriesi October 20th, 2008 at 10:11 am
It was a Z-index issue. Adding the z-index in CSS for the menu and the drop down lists, solved the problem.
Tomas October 21st, 2008 at 3:20 am
Hi,

I am using similar menu in our (inhouse) system and we discovered a bug in FF – if you get out of the menu over a input=text the menu does not roll off (disappear).

in this case just place a input text underneath the menu and make "mouse out" over it and the menu does not disappear, but remains opened.

I am trying to solve it but no luck so far. maybe you (all people) get any idea :)

thanks.

T.
Sara Rao October 21st, 2008 at 7:36 pm
Here is my css code for the menu
The menu is menuh and has a container menuh-container

Right below the drop-down menu is a banner that will be displayed horizontally across the page.
When I hover over the menu items, the drop down is displayed but it gets hidden behind the banner image and I am unable to click on the drop-down links.
This ONLY happens in IE6
#menuh-container
{
position: absolute;
top: 2.5em;
left: 48%;
width:660px;
margin-left:-280px;

}

#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:0.1em;
margin-top: 1em;
}

#menuh a
{
text-align:left;
display:block;
border:none;
white-space:nowrap;
margin:0;
padding: 0.1em;
}

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: white;
background-color: #0c2e6c;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color: #663399;
text-decoration:none;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
text-align:center;
}

#menuh a.top_parent:hover
{
background-color: #009900;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
text-align:left;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width: 7em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:1;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width: 23em;

}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:1;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;
z-index:1;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;
z-index:1;}

/* End CSS Drop Down Menu */

#banner
{
margin-bottom:37px;
}

Please help
Thanks!
Kriesi October 21st, 2008 at 7:48 pm
hey Sara, I am afraid I guess no one here will have enough time to completely reproduce this IE 6 bug. it would be much easier if you provide a link to the website. If you dont have webspace just get an account at a free hosting service =)
Sara Rao October 21st, 2008 at 7:54 pm
I have tried working with z-indices. either they are not the problem or I do not know how to effectively use them.
Sara Rao October 21st, 2008 at 7:56 pm
Ok I understand.

I will do it. Thanks.
some_dewd October 21st, 2008 at 8:39 pm
This tutorial was great and much more step by step than the other drop down tuts. Everything is working okay for me in Opera and Firefox, but in IE the menus are dropping down too far too the right. I linked my site for reference, I'd appreciate any help or tips.
some_dewd October 22nd, 2008 at 11:42 pm
I fixed it, I added left: 0; to the drop down ul's styling.
OZ October 23rd, 2008 at 5:40 am
thanks!
Tomas October 23rd, 2008 at 6:58 am
@Sara: the is a known problem with element overlay in IE 6.0 – we use transparent iframe to "flatten" and hide all those form element under navigation or .
biotech October 23rd, 2008 at 4:45 pm
Hi Kriesi,
Very nice tutorial…that much so that I am trying to implement a version of it and have a little trouble doing it.
It seems that I can not successfully wrap "child" lists items when I hoover over them….child links (list items) that whose content is in 2 lines as the list list is with set width (this is desired effect).
Any suggestions?

temp link: http://mostarnetworks.com/biotech/dmenut.html
biotech October 23rd, 2008 at 7:29 pm
ops…never mind the link but the question stands.
Is there a way to 'wrap' the list items so they look as if they are in two lines by setting the width?
==parent link==
|—child 1–|
|—child 2–|
|—child 3–|
|…that is..|
|…longer…|
|—child 4–|
Thanks a bunch!
thetattoodesign October 23rd, 2008 at 10:30 pm
Good Tutorial! I liked it, thanks
ÐÐ¹Ñ€Ð°Ñ‚ October 25th, 2008 at 1:38 am
cool menu, thanks a lot!
Stype November 1st, 2008 at 6:04 pm
Hi, I love your plug-in, really. I have a problem, that the IE8 don't renders it well (not even example from your website). The third level menu renders one line bellow than it should be… Please check with ie8, you'll see what I mean…
ian November 4th, 2008 at 4:57 pm
awesome menu!!! i'm fairly new to css and was wondering how to space the menu out so it could be spread evenly over say 900px? changing the padding is not helping.
9o9i November 4th, 2008 at 9:05 pm
thanks alot looks very very good
ST Verschoof November 5th, 2008 at 12:48 pm
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#nav a:hover{
background-color:#fff;
color:#333;
}

Just a TIP!
Change it into:

#nav a:link, #nav a:active, #nav a:visited{
outline: none
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#nav a:hover{
outline:none;
background-color:#fff;
color:#333;
}

You'll see how well that works and notice that it looks a little bit better!
Theeban November 6th, 2008 at 6:38 am
Superb yar…..
Linda November 6th, 2008 at 3:06 pm
This is just a trial page I am working on, so I implemented your script as I intend to add sub menus later as needed. It looks great and is working on IE but when I open this page in FIREFOX, everything went out the door. The menu has broken through the cell and has displaced the layout…what did I do wrong? Or ?

HELP! total novice at this stuff, but love learning new tricks.
Dhiva November 7th, 2008 at 2:16 am
Hi

In the Jquery code $(document).ready (function() {mainmenu();}));

I am getting an error message, â€œobject missingâ€, why is that?
Srikanth Reddy.S November 15th, 2008 at 10:29 am
Hi i want to create multi level menu bars.
Can any one help me out.please…

Thanks in advance.

Srikanth Reddy.S
gabe November 17th, 2008 at 11:01 pm
I got this working great am I using it for a list of links from A-Z in a box. This works great in FF but in IE the pop out menu hides behind everything I tried to Z-index but noting can someone PLEASE help?
Nadun November 23rd, 2008 at 4:29 pm
Hi,

I can't tell you how happy I am after finding your tutorial cause I couldn't find a good tutorial about css menus. With your help I will start creating my own menus and use them. Thanks for this great help.
ronsa November 25th, 2008 at 2:00 pm
I've noticed that the dropdown menu doesn't work properly on IE7 without those jQuery-things.

Just test Step 3 menu by hovering the submenu "JavaScript->jQuery->Download" and then move your mouse out of the menu, then open the menu again. That "JavaScript->jQuery->Download" hierarchy should be open but it's empty.

http://i38.tinypic.com/2ewz3vr.jpg <- picture about this.
KT November 25th, 2008 at 4:08 pm
thanks for the great tutorial!

Does anyone know what the fix is for having multiple menus work in IE 6? i.e., try this:

1 HTML
….

1 HTML
….

in IE6 only the first menu dropdown works (ok in FF)

Thanks!
KT November 25th, 2008 at 4:11 pm
re: my post above. Just realized that HTML code will not show. Here's what i meant (that doesn't work in IE6):

1 HTML
…

1 HTML
…
handoyo November 28th, 2008 at 4:34 am
Thanks for the tutor..Keep creating nice tutor.I want to ask how to create vertical menu like http://www.tokonita.com..Thanks a lot..
Ryan November 28th, 2008 at 7:28 pm
Perfect, just what I was after, the right balance between CSS and JavaScript. Thanks.
myWORLDisUNKNOWN December 7th, 2008 at 12:23 am
very well done!!!!!! thank U sooooo much!!! =)
etherealHeaven December 7th, 2008 at 12:37 am
nice tutz…
Brian December 9th, 2008 at 3:58 am
Is there any easy way to put a drop shadow on the drop down box?

Thanks!
Glen December 10th, 2008 at 2:06 pm
Hi

I have modified the code in this example to suit my needs. Its all working fine in FF, the dropdown menu shows good. But its not working in IE 7

Here s my css:

body, ul, li {

margin: 0px;
padding: 0px;

}

#nav, #nav ul { position: relative; list-style: none; height: 32px; line-height: 32px; }
#nav li { float:left; line-height: 32px; }
#nav li a { display: block; text-indent: -3000px; overflow: hidden; }
#nav li ul { position: absolute; list-style: none; display: none; width: 300px; }
#nav li ul li { float: left; line-height: 32px; }
#nav li ul li a { display: block; position: relative; height: auto; width: 300px; }
#nav li:hover ul { display: block; }
#nav li:hover ul li a { padding-left: 5px; text-indent: 0px; }

#nav0 a {width:71px;background:#3b3d27 url(/i/nav0.gif) no-repeat;}
#nav0 a:hover {background:#9883a7 url(/i/nav0.gif) 0 -32px no-repeat;}
#nav1 a {width:102px;background:#3b3d27 url(/i/nav1.gif) no-repeat;}
#nav1 a:hover {background:#9883a7 url(/i/nav1.gif) 0 -32px no-repeat;}
#nav2 a {width:128px;background:#3b3d27 url(/i/nav2.gif) no-repeat;}
#nav2 a:hover {background:#9883a7 url(/i/nav2.gif) 0 -32px no-repeat;}
#nav3 a {width:119px;background:#3b3d27 url(/i/nav3.gif) no-repeat;}
#nav3 a:hover {background:#9883a7 url(/i/nav3.gif) 0 -32px no-repeat;}
#nav4 a {width:99px;background:#3b3d27 url(/i/nav4.gif) no-repeat;}
#nav4 a:hover {background:#9883a7 url(/i/nav4.gif) 0 -32px no-repeat;}
#nav5 a {width:141px;background:#3b3d27 url(/i/nav5.gif) no-repeat;}
#nav5 a:hover {background:#9883a7 url(/i/nav5.gif) 0 -32px no-repeat;}

#nav1 ul li a { background: #afafd9; color: #05036e; }
#nav1 ul li a:hover { background: #b97df2; color: #05036e; }

#nav3 ul li a { background: #afafd9; color: #05036e; }
#nav3 ul li a:hover { background: #b97df2; color: #05036e; }
/*
#nav20 a { background:#9fddfd; color: black;}
#nav20 a:hover { background:#FFFFFF; color: black;}
#nav21 a { background: #9fddfd; color: black; }
#nav21 a:hover { background: #FFFFFF; color: black; }
#nav22 a { background:#9fddfd; color: black;}
#nav22 a:hover { background:#FFFFFF; color: black;}*/
Layla December 20th, 2008 at 7:59 pm
One word…. BRILLIANT!

Thank you!
Bosco December 21st, 2008 at 9:57 pm
Hi Kriesi,
I've bought your cool Communizine. How can i setup the commnets to receive the real gravatar of my commentors?
I appreciate your answer, by email, if you can.
Thanks a lot,
Bosco
Bosco December 21st, 2008 at 10:02 pm
Excuse-me, Hi Kriesi, but the email address is
bsobreira@boscosobreira.com
Thanks, again
babbibel December 25th, 2008 at 8:43 pm
Thanks for this graeat tutorial, i use it on my website

Big up & let jah music play
Mikunda January 2nd, 2009 at 9:50 pm
Hello,

The menu is great. After testing so many others, this one is like a breath of fresh air. Great work. Just a small quirk…

When in Firefox, and when not on the main index page, let's say if I go to a subpage:
http://laurelhillschool.org/new/nursery.html
if I re-load the page, there pops up a large gap between the main and sub-menus. What is the problem? I couldn't figure it out. Could it be because my subpages are in a sub-folder separate from the index.html?

Thank you so much for your thoughts. I know you probably are way to busy to respond. Where can I give a donation to the project? Thanks a lot.
craig January 4th, 2009 at 8:51 am
Can you make another one but instead of using id #nav, use class .nav so that people can have multiple menus like that in one page.

Meanwhile, doing this script by css class , it would be more usable in more case
craig January 4th, 2009 at 9:08 am
Oh, I've just check out your portfolio. Nothing but one word, amazing!

I like the blog with beach theme and i like this site with the wonderful javascript menu.

You have mad skill at photoshop, am I right ?
frycu January 7th, 2009 at 4:18 pm
very nice tutorial :)
thanks a lot!!
Andrew January 14th, 2009 at 6:15 pm
hi Sir,

I tried your codes and it worked fine… except that when i dropped down your sub menu from your main menu, it overlapped with the background picture and website's wordings right above the picture(below your menu), how do I make the submenu overwrite the website's background picture and wordings when i click on select the items on the menu…

kindly assist…

Thanks in advance,
Andrew
Andrew January 14th, 2009 at 7:01 pm
hi Sir,

Thanks for the scripts, it worked. But i got one problem.

How do the submenu that's extended from the main menu overrides the website's background pictures and background wordings as the submenu is shown when the mouse is clicked to the submenu? as they are overlapping with the submenu's item.

Thanks,
Andrew
WLHH January 19th, 2009 at 1:33 am
I have been looking everywhere for something like this!

One problem: I cannot make the nav bar center (using margin:0 auto; or width:100%, or anything else I can think of).

Any suggestions would be greatly appreciated – I can't use it otherwise! :-(

One other small question: I've been fiddling a bit, and now the dropdown menu starts about 5px below the main menu (iow, there is a space of that width between the two). What in the CSS controls that?

Thanks!!
Jack Fisher January 19th, 2009 at 7:24 am
wow love the menu tutorial going use it for sure
Sahil January 21st, 2009 at 10:30 am
I want this effect on click menu.Please Suggest me
Sahil January 21st, 2009 at 10:32 am
It is working fine on hover can it be change when i click on perticular menu item.
Link January 28th, 2009 at 10:12 am
Awesome tute – thanks Kriesi, you saved my life.
Cheeky question – I know this is probably a huge mission, but is there any possibility of setting rounded corners or such like to these drop downs?

*****
To WLHH, I think I may have some answers for you based on what I've been playing around with on my site just now. I'm a complete noob at all of this so I'm sorry if these are not the best solutions, but they should get you up and running for the time being.

I set the width of the bar to fit a table on my page
#nav{width:42em
- but this only affected the menu bar when I also set the width of the first set of links:
#nav a{width:7.6em;
You can center your links in the same bracket with
text-align:center
and then just play around with those two width figures until everything spreads out as intended.

Re: your second issue
I have the same problem in IE with the drop downs appearing beneath a gap – which effectively means you can't click on any of them. But I found that if you set the TOP value under nav ul (it's originally 1.5em) to slightly lower than the #nav line-height value (they're originally equal at 1.5em) then it alines itself… I had to set mine to line-height:1.5em vs top:1.2em. This puts things a bit off when you hover over the topmost dropdown link (especially in FF), but it's a small price to pay for functionality.
Bobby January 30th, 2009 at 7:56 pm
Loved this tutorial!!

Question:
Is there a quick way to make the html validate?
Bobby January 30th, 2009 at 10:44 pm
I found the answer to my question:

1 HTML

3.1 jQuery
3.2 Mootools
3.3 Prototype
Bobby January 30th, 2009 at 10:51 pm
The tag must close after all dropdown content and not before in order to have valid XHTML.

EXAMPLE:

li — 1 html
ul
li /li
li /li
li /li
/ul
/li
Thomas January 31st, 2009 at 11:07 pm
this is EXACTLY what i've been looking for, and very tight optimized code! but i have one problem: for my application it's a necessity for the parent element to remain highlighted (or selected) while the child menu is open. Currently, when mousing over the child links the parent is no longer highlighted. so it only has a hover state, and not necessarily a "selected" state. I've played around with this for a while and I can't seem to get it to work. Is there a way to implement this? Much appreciated!
MissANN February 1st, 2009 at 5:03 am
Awesome tutorial!!!

But, I was trying to add more nested lists but it just won't work T_T
MissANN February 1st, 2009 at 5:34 am
ooops! never mind my first post.. :P

Thank you so much!

By the way, I really love your site!! ^__^
Carolina February 2nd, 2009 at 8:44 pm
Very nice, thank you!
David February 6th, 2009 at 3:18 pm
Very nice. Thank you.

Has anyone managed to convert this to produce a dropline menu – e.g. http://www.cssplay.co.uk/menus/pro_dropline7.html – but without the mass of conditional comments that is used on that example to make it work in IE6?
Neal G February 6th, 2009 at 11:27 pm
Thanks! I have been trying tutorials out for the past hour and yours has been the only one that worked.
michel February 12th, 2009 at 4:00 pm
HI there and thanks for a great menu – i am very new to scripting and currently building my site. after trying several menus (namely from dynamivdrive) i came across yours which seems more lightweight to me. In any case i have tried to modify it to fit my design but with only partial success – maybe you can help with couple of questions…
A test page is here: http://michelmoalem.awardspace.com/index5.html
1. when playing video in an embeded player from vimeo (see menu item 'showreel') the dropdown menu doesn't show over it… can it be done?
2. after hacking the css file a bit i seem to have lost the sliding effect that yours seems to have – how do i restore it and slow it down a bit if possible?
3. ideally i would like to have the menu below the screen
(as in http://michelmoalem.awardspace.com/index3.html) and slide up – can it be done with your script?
thank you again
michel
Valery Buchinsky February 15th, 2009 at 3:37 pm
The tutorial is great. It helped a lot. I was trying to do something similar and just didn't realize that ul li.mouseover() will be active even for children of the LI. Thanks again!
Paul February 20th, 2009 at 6:04 pm
Anyone know of a tutorial or similar that describes how to take this particular jQuery menu and have the links dynamically loaded from an xml file? or rather I'm trying to implement this menu and the asp menu control in asp.net 2.0 together. if anyone has any advice and/or has done this, please let me know. to be able to integrate this jQuery menu with asp.net's site map security based asp menu would be so great.

Thanks.

also i noticed with this menu you have to add some extra css styles to get the borders just right — as with the current implementation it doubles up the borders in certain areas. it doesn't show up in the demo because of the chosen border color is the same as the background color.
Milamber February 23rd, 2009 at 11:45 pm
@Thomas

Try adding the following two lines to the script itself:
(on mouseover – first function)
$(this).addClass("hovered");
(on mouseout – second function)
$(this).removeClass("hovered");

And just style the hovered class the way you want it to show that the current menu item is selected. This works okay for me.

Though the main problem I'm facing at this point is… if a user moves away from the menu, it vanishes a bit too fast… and with my site having four-level menus, that can be quite the nuisance. What I want to achieve is… have it delay hiding the menu if the mouse moves away from the menu itself, but have it vanish immediately if the mouse moves over a different drop-down. Suggestions anyone?
boltthrowerusa February 25th, 2009 at 9:09 pm
thanks for this tutorial. I am trying to use this with the latest jquery (jquery-1.3.2.min.js) and it doesn't seem to work but works with previous versions.

thanks
aryang March 4th, 2009 at 7:36 am
éžå¸¸æ¼‚äº®çš„èœå•ï¼Œæ„Ÿè°¢ä½œè€…ï¼
L.M March 12th, 2009 at 10:25 am
Thank you, so much.
éžå¸¸å–œæ¬¢ä½ çš„Blogï¼Œå¾ˆæœ‰æ”¶èŽ·(good job)ã€‚
G3r84 March 17th, 2009 at 9:47 pm
Hi im having the problem of the sub menus falling behind other parts of the web it has been told that a Z-index in the CSS solves this but i dont know how it should be can anyone please help me…?

Thanks in advice
shane plasebo March 22nd, 2009 at 12:57 pm
Has anyone tried to implement easing plugin onto this simple drop down menu ?
niko March 25th, 2009 at 8:10 am
hey! thanks for this one but, I have a problem. the menus display below select tags. The same is true for ajax calendars. I tried putting a z-index on all the uls and lis but it still displays below select tags.

Got a workaround for this?
Patapon March 27th, 2009 at 8:39 pm
Thank you. I love your tutorial. thumb up++
Ray March 28th, 2009 at 5:19 am
If anyone figures out a way to highlight the parent text color and not just the background as per Milamber's suggestion (http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery#comment-2916), please post it!
D. McClain April 9th, 2009 at 2:55 am
I used the "Create a multilevel Dropdown menu with CSS and improve it via jQuery" on a site I am developing for a client. I changed the menu to the specifications I needed. Everything works fine in all versions of IE. However, the dropdown doesn't work in Safari and Firefox. Here is the link to where the site is temporarily posted. http://www.applet19.com. As I was troubleshooting I discovered the problem lies with the way I reordered the list. Is there something in the javascript(jquery) file that causes this to happen? I need someone to post a solution as soon as possible. The client is growing impatient. Thanks for all of your help.
black_designer18 April 9th, 2009 at 9:05 pm
Nice tutorial.. hope i can ask you some question regarding web development..
Leo Baringin April 17th, 2009 at 9:10 am
Wow great stuff… This is what i have been looking for. Thanks
ARTI April 17th, 2009 at 3:30 pm
It works fine on my version of Firefox 1.5.0.1 Perhaps you don't have the latest version. I run an image gallery myself, but I don't think type of layout would artÄ± work very well for me as I have descriptions for my images and some of the images are quite large. I don't know, it might be worth experimenting with.
Meeesta April 17th, 2009 at 5:25 pm
Firstly Kriesi, big thanks to you, I looked for ages trying to find a robust dynamic menu system, and this one fit the bill perfectly.

Just one thing, is there any compatibility issues with newer versions of jQuery? I tried switching to 1.3.2 but couldn't get the menu to work.
Philippe April 23rd, 2009 at 3:22 pm
hidden is calculated was changed in jQuery 1.3.2 (see http://docs.jquery.com/Selectors/hidden and http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled)

The code below works fine for me now :
$("#menuBar li").hover(function(){
$(this).find('ul:first:hidden').css({'visibility':'visible','display':"none"}).fadeIn(400);
},function(){ $(this).find('ul:first').css({'visibility':'hidden','display':"none"});
});}

I added 'display':"none" when rollout
Govindji Patel April 29th, 2009 at 11:56 pm
Hello

I like the tutorial and have it working on firefox and I am still having problem for it to work on IE when mouseover nothing happens just highlights the tab.

I read that some posters did have it working on IE I would be very glad if someone who has it working help.
I have it here on a test website that is a phpnuke CMS
http://www.phpnukeblog.com/html
Govindji Patel April 30th, 2009 at 9:04 pm
I have the menu working on IE7 and now I need to figure the way to position in center any help will be appreciated
thijs May 1st, 2009 at 12:50 am
Nice tutorial.
I found that in FF 3.x, the Opera fix that you put in has the effect that when you move the mouse out of the top LI element, the sub menu is hidden again. I don't get why that is, because if you are hovering over the sub menu, strictly you are hovering over the LI as well.
I also did not really notice the Opera problem the fix was intended for.

When I changed the fix to the following, it worked again:

$(" #nav > ul ").css({display: "none"}); // Opera Fix

Considering that nobody else commented about this, I must have another css issue which makes the sub menu disappear too soon. I'm building this into an existing site, so it's not as 'clean slate' as I'd like.
As soon as I have it up on my domain, I'll drop the link so you can take a peek.
All in all, thanks for this.
Gavin May 7th, 2009 at 12:07 pm
For those having issues with jQuery 1.3.2 it's b/c they changed how jQuery sees things as hidden see here

The menu was just showing up once for me, but once the visibility was changed to hidden it wouldn't appear again. I just removed the :hidden portion and all worked fine.
jose May 7th, 2009 at 8:11 pm
Thanks for sharing. it's super cool.
Ed Ruder May 8th, 2009 at 6:50 am
Gavin's fix for jQuery 1.3.2 worked for me, too–change

$(this).find('ul:first:hidden')

in the first function passed to the hover function to

$(this).find('ul:first')
Srky May 21st, 2009 at 9:07 am
After i saw that lot of people asked how to create with highlighted previous levels and lot of them gave half of answers i created full XD.

Link: http://rapidshare.com/files/235497431/dropdown.zip //virus free
Tested and working on: Firefox 3.0, 3.1b3, Internet Explorer 6, 7, 8, Opera 9.0, 9.6 and Safari 3.0 on XP SP3

P.S. Plz Kriesi if you could upload on your website.
chinalwb May 26th, 2009 at 2:34 am
Thanks a million, pals,

SMASHING menu, I'd say.

I am enjoying this menu, it does help me a lot, however, here is a problem of mine:
How can I add a down-arrow for the vertical menus, and add a right-arrow for the horizontal menus?

I'd like to express my gratitude, thanks heaps!

Best Regards,
chinalwb

2009-05-26 09:30 AM
Brigitta May 31st, 2009 at 9:42 pm
Hi there,

I was very happy when I found your page, this menu is just what I needed, very smooth and compact. Thank you for sharing!!

Brigi.
Webagentur June 6th, 2009 at 12:06 pm
Thank you … this menu has me very helped.
sisi June 12th, 2009 at 10:02 am
Hi

Thank you very much for this work. It is great and very useful.

I have the same problem than Tomas on October 21st, 2008 "if you get out of the menu over a input=text the menu does not roll off (disappear)"

In my case, it is not a small text field but a big textarea.

This code fixed the problem for me:

We create an empty div before the nav menu code

with this style:

#bgTransparent{
display:none;
background:transparent;
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
z-index:1;
}

#nav, #nav ul {

[...]
z-index:2;
}

This is my jquery code:

function mainmenu(){

$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li ").hover(function(){
$('#bgTransparent').show();
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none",opacity: "0.9"}).slideDown("400");
},function(){
$(this).find('ul:first').slideUp("400");
$('#bgTransparent').hide();
});
}
$(document).ready(function(){
edHeadings();
});

Thank you again.
Myfacefriends June 28th, 2009 at 5:28 pm
amazing tutorials! thanks.
free psp go July 1st, 2009 at 3:05 pm
looks amazing thanks !
Vaganovski July 16th, 2009 at 7:45 pm
Thank you! Great solution!
Benji64 July 22nd, 2009 at 2:48 pm
Hi Guys,

I have managed to modify the script to meet my design but i am having a problem in ie6 and 7 with the menu going off to the right off the text when the menu expands? works fine in all other browsers. Cheers for your help.

Benji
Musta July 27th, 2009 at 11:01 am
This is really superelegant, I will use it, for sure, in one of my future projects. What I like most about this is that the menus are kept visible even when the javascipt is disabled, which is very important for any website that takes accessibility into account.
Thanks for the tutorial.
Christian July 30th, 2009 at 8:41 am
Here is my code:

function mainmenu(){
$("#navList > UL").css({display: "none"}); // Opera Fix
$("#navList LI").hover(function(){
$(this).find('UL:first:hidden').css({'visibility':'visible','display':"none"}).show(400);
},function(){ $(this).find('UL:first').css({'visibility':'hidden','display':"none"});
});}

$(document).ready(function(){
mainmenu();
});

On Firefox 3.5 the first time you point at a link that has a submenu the submenu flashes on instead of being "shown" jQuery style. Every subsequent time however the submenu fades in to view correctly. Any suggestions on how to get it to work right the first time? Also, it seems that once the submenu is fully in view it shifts to the right a pixel or two.
Ben August 10th, 2009 at 12:09 pm
I really like this menu, I was just wondering if there is any way this menu can be implemented with your apple style menu as well.

Best regards,
Ben
Ben August 12th, 2009 at 3:34 pm
Wonderful! I'm using it on a wordpress theme :)
Jonathan August 19th, 2009 at 9:49 am
Hi, really like the menu and have implemented it into a site I'm currently working on. I just can't get the jquery to work though.
I'm using asp master pages. Is there any reason this might be a problem?

Cheers
Denis August 28th, 2009 at 12:53 pm
I'd sure like to replace my current script with yours. Where do I find info on running two menus on one page? That's the problem I'm having since the css seems designed for a single menu.
web August 29th, 2009 at 6:16 pm
wonderful menu
squirrel September 8th, 2009 at 12:54 am
Hi, I can't get this to work in IE6. Please look at http://atribuut.ee/minig-kolmas-menuupunkt/
Try to hover over "Sisumallid" and then try to move cursor to 2nd or third menu tiem. The menu disappears. I cannot undesratnd what is causing this. It seems however that when I push down the content div, ie give it a huge top margin, the menu will not dissapear anymore. I tried all kinds of position:relative and z-index tricks but I coudlnät make it work. Matbe someone here can help?
squirrel September 8th, 2009 at 11:11 am
Alright, I figured it out. Took me about 4 hours arghhh.. DIE IE6!!!!

The trick is that You need to have a background-color for the dropdown menu ul. It's not enough if the li or a has a background-color.
jeickelement September 12th, 2009 at 7:27 pm
Thanks. is easy.
Eric September 21st, 2009 at 10:48 pm
Excellent work on this menu and the explanation and support you've been giving. Is it possible to add different effects to different levels of the menu? For example, the first level slides out and its children fade in.

Thanks and keep up the great work.
kasparcho September 29th, 2009 at 11:32 am
Srky,
Please contact me through my mail: kasparcho@mail.bg or skype: a_tsonev
I found a problem with a little modification of your script.
Thanks in a advance.

Special thanks to Kleisi for the creation
and Srky for the update of this wonderful script.
sannie September 30th, 2009 at 12:17 pm
lighting up the current page

hi kriesi,

thanks very much for this brilliant piece of work.
I wanted to share this nice usefull feature
for lighting up the current page in the menu.

maybe in addition to this you know how to make the dropdown of the current page in the same color as the not-current pages when visiting the current page. in my case it's pink so that's a lot of pink dropping down.

great tutorial btw.

sannie

page has to have extention .php

add to css:

#nav #currentpage a {
background-color:#FF0099;
color:#fff;}

#nav #currentpage a:hover{
background-color:#fff;
color:#333;
}

add to top of page:

add php to menu:

<li>
about us
<li>
models

models

a

b

c

d

e
sannie September 30th, 2009 at 12:22 pm
that did'nt go well….

but if you look at the source you will get een idea
sannie
Ulises October 13th, 2009 at 9:15 am
I have to say that I found your explanation very helpful.. even though I am not using this tecnology(the menu) for my site…

I have a question… Even though the menu works perfectly.. the unordered listed could include images to make the menu look smoother visually.. Isn't that right?

actually I am going to change my web partly using jquery UI.. adding some glitz(ehhe)
Tyler October 18th, 2009 at 3:56 pm
I use z-index to make it works in ie6 ( if not the menu feet appear below the content that follows it ) :

1. On the ul #nav :
#nav {
position:absolute;
top:79px;
z-index:100;
}

2. On the content ( following my menu ) :
#content {
position:relative;
width:100%;
margin-top:30px;
z-index:-10;
}

But you HAVE TO specify the "position" ( relative, absolute or fixed ) for both elements #nav and #content.
Uday November 3rd, 2009 at 8:00 am
I have created the menu of the same kind. I have called JavaScript functions onclick of the hyperlink of menu items. But now the menu doesn't disappear when i click the hyperlink. Can you tell me where i may have gone wrong or this is the way it is?
rana November 3rd, 2009 at 9:30 am
nice article, helped me a lot…
Gboyega S. November 15th, 2009 at 7:56 pm
Thanks a lot for this beautiful piece. It helps a great deal!
Don November 22nd, 2009 at 5:04 pm
Thanks very much for your d/d/menu I have been trying for some time to achieve this. I am trying to convert your code to my website. I have a couple of problems though; the first one is that the border on the first level is being overwritten. I have tried many ways to solve this can you help. you can see the result at:-
http://dl.dropbox.com/u/2701238/dropmenu1.jpg
The next problem is that as IE does not support position: absolute any ideas as to how I can reposition the menu in IE as it shifts to the right. Just remembered another problem, the first drop level gets selected before I reach the menu bar from below. How can I stop this.
Matt Mahar December 3rd, 2009 at 2:07 am
When doing the css hover section, you added in an unnecessary entry to both the display and the hide portions.

It could be left as just this:
#nav li:hover ul ul, #nav li:hover ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul{
display:block;
}

Notice I took out the last entry on both items. This was giving me fits because I was looking for unordered lists that weren't there. But when using this in the css, it works the exact same. Now, if you wanted to add another sub menu to the "download" tab, then you would need the extra lines of css code. I'm not sure why you added in extra css when you didn't need to unless you anticipated people needing more than 3 layers. I think your tutorial is awesome but PLEASE, when you add a line to css code that is not necessary for this specific tutorial, please let us know since I was pulling my hair out and questioning my css intelligence trying to find the extra unordered list. Having said that , really nice tutorial.
Matt Mahar December 3rd, 2009 at 8:10 pm
Upon further review, it seams you added two(2) unecessary lines of CSS code. The drop down, css only code shows fine with this:

#nav li:hover ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul{
display:block;
}

Note what I did here. Since the #nav id already calls the main "ul", you only need to tell it to not show the 3rd level(or third ul). On the second one, you only need to tell it to show the second and third level when hovered. The only reason I can see that you added the extra CSS is incase you want more levels, the CSS is already written for you. You comment is much appreciated since it was driving me nuts. I questioned my whole understanding of CSS.
Glyn December 10th, 2009 at 1:57 am
@jwright – Not sure if you sorted the setTimeout issue. I too am a newbie to JS but was able to hunt around and sort out the delay after falling off the menu.

Here is my amended JS

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(300);
},

function (){
var el=this;
setTimeout(function(){

$(el).find('ul:first').css({visibility: "hidden"});
}, 2000)

}

);
}

$(document).ready(function(){
mainmenu();
});
Glyn December 10th, 2009 at 2:07 am
OK my problem with what I juts posted is that when I hover over a few secondary menu items the tertiary menus hang around.

How do I say only delay the "hidden" whn I hover off all menus?

Cheers
Mrzen December 17th, 2009 at 9:09 pm
My too I would like to know How do I delay the "hidden" when I hover off all menus?
marco December 23rd, 2009 at 5:53 pm
i have a problem with the first voice of submenu
i can't go to the submenu
i copy your css but don't work

the test site is: http://www.flytothai.com/armony/index2.php
wespai December 28th, 2009 at 7:16 am
thx collect it to

ajax.wespai.com
Lee89757 December 30th, 2009 at 8:34 am
Hi, thanks for this tutorial. it works really great. But i have problem to put the menu to a menu container(inside i put menu here). menu appear outside the container. can someone give me solution. Thanks
karla January 6th, 2010 at 12:44 am
un excelent blog
karla January 6th, 2010 at 12:48 am
hola como puedo hacer una seccion de comentarios para mi sitio web :P
Tom January 20th, 2010 at 10:00 am
Great tutorial. Will use it for one of my websites!
Tarun Madhok January 21st, 2010 at 2:55 pm
very nice tutorial!!

but it cant helped me out !!!
iam using wordpress

i already have dropdown menu. i want to extend to flyout for sub-submenu

I am desperately need help!!
Tarun Madhok January 21st, 2010 at 3:28 pm
thanks finally the code work!!! very nice work done!!!
TravelingDC.com January 22nd, 2010 at 5:15 am
Thanks for the tutorial!!
Damrod January 22nd, 2010 at 10:10 am
First of all… great tutorial THANKS! :)

And now the question ;)
How do I add an indication on the FIRST level if the user is clicking on a link?
An addClass("selected") on the click-event is not enough in my case, I want to add the "selected" class to the parent element on level 1. See example below:

[-1-] [-2-] [-3-]
[-3a-]
[-3b-]

Let's say the user is clicking on submenu item "3b", I would like to highlight menu item 3.

Hope you can help.
Thanks,
Damrod
Meryl January 27th, 2010 at 12:47 am
I love your menu, and I'm using it for my personal Website. I'm having one problem – in Firefox.

You can see my site and the problem here: http://www.merylpaul.com/merylIndex2.shtml

I have two items that I want to drop down from the main menu. The first one (classwork) drops down fine. But the other (photography) doesn't show in Firefox. It should have two items dropping down: Spring-Summer Gallery and Fall-Winter Gallery.

The menu works fine in IE7, just not in Firefox.

Was the menu only supposed to allow one drop-down?
Devin February 7th, 2010 at 10:27 pm
Can you make it that when you click the link, the menu closes? cause it's kind off irritating it stays open ;)
Spheerys February 9th, 2010 at 12:06 pm
Very nice menu, thanks :)

But I have found a incompatibility with the interface.js script used for example with CSS dock menu like http://interface.eyecon.ro/demos/fisheye.html

The problem only appears on IE6, IE7 and IE8 when the interface.js is load : the menu disapear before the user can clic on the submenu…

Any issue ?
Adam February 9th, 2010 at 11:52 pm
Excellent tutorial. this is the first thing i have worked on using jquery and had it up and running in minutes! bye bye ASP menu at last!
Faheem February 12th, 2010 at 10:53 pm
Thanks
Great tutorials for Beginners to JqueryI appreciate it
??? February 14th, 2010 at 3:24 am
??????????????????????????????????????????????????????????????????????
Kawika February 15th, 2010 at 5:39 am
Thank you so much for this!! I've been looking all day for a jQuery multilevel dropdown menu like this!
Herb February 16th, 2010 at 3:31 am
Great, thank you!

Much easier to implement than most jQuery menus, and it worked the first time!
Mrzen February 22nd, 2010 at 4:48 pm
Some help please.
How do I say only delay the "hidden" when I hover off all menus?
jhoanna March 5th, 2010 at 6:32 pm
i have tried to customize the script for my needs and instead of html css and javascript i've put home ,about us,resources,contest,login, but i have a big problem and i don't know what to do.It appears only home and about us.I mention that i have changed only in html script.Please help me,i'm very sad.thanks in advance.