Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

The Finished Product

Getting Started

To begin, we need to define our basic menu hierarchy. In order to maintain a structured and semantic approach to this, we will use nothing more than unordered lists of standard links. We’ll use the following code as an example:



<ul id="cssdropdown">
<li class="headlink">
	<a href="mine.html?search_engines">Search Engines</a>
	 <ul>
	  <li><a href="http://google.com/">Google</a></li>
	  <li><a href="http://yahoo.com/">Yahoo</a></li>
	  <li><a href="http://live.com/">Live Search</a></li>
	 </ul>
	 </li>
	  <li class="headlink">
	  <a href="mine.html?shopping">Shopping</a>	 
         <ul>
	  <li><a href="http://amazon.com/">Amazon</a></li>
	  <li><a href="http://ebay.com/">eBay</a></li>
	  <li><a href="http://craigslist.com/">CraigsList</a></li>
	 </ul>
 </li>
</ul>

You should see something like this:

Basic Unordered List of Links

Creating Dropdown Lists

With our semantic HTML and link structure written out, we can proceed to apply some basic hover techniques that are included in CSS. The :hover pseudo-class is invoked when the mouse is placed over the list item.

We can use CSS to hide the child unordered lists by default, and show them with the :hover pseudo-class, like so:


       li.headlink ul { display: none; }
       li.headlink:hover ul { display: block; }

It is best to take this opportunity to apply some basic styling to the list, such as floating the parent unordered lists in a row, and specifying the width of the unordered list to ensure that no shifting occurs when the elements are hidden or shown. This should look something like this:

The Basic Styling Applied to the Unordered List of Links

The Issue with Internet Explorer

Unfortunately, while the :hover pseudo-class may be elegant, it does not work in Internet Explorer. At this point, a short bit of JavaScript is required to provide a clean fix. All we need to do is select all unordered lists that are within a list item that has the class .headlink and add onmouseover and onmouseout events to them. This can be done in twelve simple lines of code:


	window.onload = function()
	{
		var lis = document.getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}
	

Those using jQuery are privileged to an even easier solution:


	$(document).ready(function(){
		$('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});
	

Putting It All Together

The dropdown menu is now functional in the major browsers, and is ready to be styled, cleaned up, and shipped.

It is advantageous to start by applying a basic style that’s a little more appealing than the standard lists. This allows us to visualize how this will fit into our application or design.

Standard Styling on Dropdown Menu

Adding Some Flare

With a few extra lines of CSS, the menu is styled and ready to fit into our site.

Wrapping Up

One important aspect of writing a generic dropdown list is to segregate the CSS and JavaScript to ensure that there are no conflicts. The easiest way to do this is to add the #cssdropdown selector in front of every element.

Finally, we check to see if the #cssdropdown div can be moved around freely. This ensures that dropdown menu we have created will flow nicely when integrated with our existing site design or application user interface.

The full code and example remains both basic and concise to exemplify the simplicity of the underlying technique for using dropdown menus on your website. Enjoy!

Tutorial kindly written by Nathan Wong

Got a question about this article? – Ask it here!


Our http://testking.com/ and http://www.certkiller.com/exam-350-030.htm exams provide you 100% pass guarantee. You can get access to http://www.actualtests.com/exam-350-029.htm and http://www.pass4sure.com/CompTIA-A-plus.html with multiple prep resources of http://www.realtests.com/training/CCNA.htm.


  • http://www.georgebutler.com George

    This one’s going in the bookmarks. I was looking for a clear explanation of this. Some tutorials I’ve seen have lines and lines of unnecessary markup. Thanks for keeping this simple.

  • http://www.egracecreative.com Brandon Cox

    Awesome tutorial and example. Drop downs consume a ton of hair-pulling time for me – I appreciate the help!!

  • http://www.emrahdodanli.com/ iddaa
  • http://www.1stwebdesigner.com Dainis Graveris

    Nice tut and inspirational outcome! :) I needed detailed tutorial like this – so thanks, appreciated!

  • http://nathanwwong.com/ Nathan Wong

    I’m glad you guys are making use of the tutorial. I appreciate the kind words. Keep an eye out over this coming week for a handful of jQuery/CSS tutorials on various common UI elements! :)

  • http://utchanovsky.com utchanovsky

    Wow, cool tutorial. I’ll bookmark this. Thx a lot

  • Blaketdet

    Thangs …Bro

  • http://sarsini.it Martin Sarsini

    It’s a good simple system. But if you are looking for more complex stuff, more personizable options, compatibilty with flash z-index etc… jdmenu is the best

  • Tim

    What about adding a delay to the mouse out event? That way if you accidentally move the mouse the wrong way, it won’t close the pulldown. This helps when the dropdowns get complicated (with sub-dropdowns, etc). Do you have an easy way of doing this? Or perhaps adding a slower animation to the pulling down of the menu, that would help to. I realize your purpose of making it simple, and that’s awesome. This is one the simplest and best described tuts on this I’ve seen.

  • http://www.kaliterehberi.com.tr iso 17025

    Great article! Very useful.

  • http://www.hamroawaaz.com Rahul

    very nice. I like CSS examples and am also inclined towards jQuery as well.

  • Ap

    @Tim: I second that!

  • http://ziqbalbh.wordpress.com Zafar Iqbal

    It really is a nice example, showing in simple but still with some details about setting up a nice one level CSS drop-down menu. Addition of jQuery also enhances its usability.

    Thanks for the effort.

  • http://www.kimguanzon.com Kim Guanzon

    Is it possible to create a multi column div that drops down from each category like johnlewis.com?

  • http://www.bluesheepstudios.com/blog Alek

    Very good tutorial. Nice and simple.

  • http://www.delhicityindia.com Delhi City India

    Hey,
    Great Job……
    Nice tutorial

  • http://nathanwwong.com/ Nathan Wong

    Kim: Yeah, you could use a div instead of an unordered list for the dropdown part and you should be able to float within it without too much trouble. It would take some changes, but overall wouldn’t be too hard. Post a comment up if you try and can’t get it working. :)

  • http://www.noamdesign.com new york web design company

    hi. this really helped me out a lot. i am happy.

  • http://simmerdesigns.com David Simmer

    Nicely done. Minor nitpick: we should add visual “flair,” unless the menu is intended to light on fire, in which case “flare” would work :)

  • shubelal

    Nice work I am going to use this. thanks

  • http://www.honestillusion.com James Curran

    Now, is this just me?

    I can view this page fine in IE, but in FireFox I can see the comments, but not the article itself.

  • http://www.aviationutah.com Cam Peterson

    Nathan, I love the tutorial and find it working well with Safari and Firefox. I am having a bit of trouble with Internet Explorer. When using the javascript, it bumps the text nested in a div out of its way. In FF and Safari the dropdowns show up over the text. Any thoughts? I am using it at http://www.aviationutah.com.

    Thanks,
    Cameron Peterson

  • http://www.northstar-website-design.com Fred Campbell

    Thank you so much for such a clear and concise tutorial.

  • http://nathanwwong.com/ Nathan Wong

    Cam: What version of IE? I only have access to IE7 at the moment and it’s looking fine for me. Or have you fixed it yourself? Thanks for the kind words. :)

  • http://maxbidauctions.com/ MaxBidAuctions.Com – Online Auctions

    This is Great Creating Dropdown Lists will come in handy, when we create our favorite Links Page!

    Thanks
    BOB

  • http://www.witnesstochange.com Shaun

    Hey, first off this is a really good example of a drop down. Very simple, very solid and very easy to alter.

    But I’m having an issue with the popup sometimes showing behind content on the page. Is there any way of changing the z-index so it’s always in front?

    Thanks
    Shaun

  • http://www.witnesstochange.com Shaun

    Ignore me, it was very simple, in case anyone else has a simular issue. Just add a high number (eg. z-index:10) to the CSS and it will always be in front. If you have flash files don’t forget to set your Flash files to wmode=”transparent”. Everything should work fine and dandy.

  • http://nathanwwong.com/ Nathan Wong

    Glad you found a solution, Shaun, and thanks for sharing with the rest of us. :)

  • ryu

    Really cool…
    Keep it up !!

  • indi_sign

    :)
    This is great tutorial, but why to use jquery if you can make exactly the same effect/stuff with pure html and css, which will be accessible all the time, with enabled/disabled JS.

    Great tut anyway, helps a lot to understand the basics of jQuery.

  • http://nathanwwong.com/ Nathan Wong

    It’s that IE doesn’t support the CSS :hover pseudo-element on anything but anchor tags. The JS is used to make IE work. I know, it’s disappointing we can’t just use CSS, but that’s the hand we’ve been dealt. :) Glad you like it!

    – Nathan

  • Kristoffer

    Hi Nathan, I have a problom with this. When I dont Hover the menu, the page looks great, but when I hover it, the submenu pushes everything on the page down.. I would like the menu to be ontop of the content of the page.

    Am I doing something wrong? Great tutorial!

  • WhoMe?

    I’m sorry but I thought this tut was HORRIBLE! I am new to web design and I don’t know where to paste this information. Is it in the HEAD or BODY section. What name do I save the CSS file? Etc….

    Please remember that some in your audience are completely new to java/html/css.

    thanks

  • http://deadsilence.org/miranda Miranda Adria

    This tutorial was very helpful. I’ve used it for my own website as a tree menu.

    How could I tweak this coding so that whenever the headlink is clicked, the options below stay open until something else is clicked?

    Thank you.

  • http://www.radekpleskac.com Radek

    I’ve been looking for some simple drop down using CSS and jQuery, I’ve just bookmarked yours. Must say, I got a bit worried when I was reading the lines …getElementById…is this a CSS + jQuery tutorial? I soon realized why was it there :) Thanks for this tutorial!
    Radek

  • http://www.drawn-in.co.uk pflynn

    Got to say Nathan great tut! Cheers for putting it out there!

  • Frank

    Hey – I just found this awesome jQuery Cheat Sheet for the iPhone. I’ve only had it for a day and it’s been really helpful.

    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8

    Looks like there’s also a CSS Cheat Sheet from the same guys.

    http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301093674&mt=8

  • http://design.thomasville.com/Contract/Collections/ Jeremy

    I unfortunately cannot get this to work on IE 6/7 at all. When you rollover Collections in the navigation, it uses this tutorial drop down in Safari / Firefox beautifully. However, I’ve referenced the javascript in an external file called jquery.dropdown.menu.js. But, no matter which version I use of the javascript code vs. jquery code, I am unable to get it to work. Any suggestions?

  • http://pauldewouters.com paul

    kristoffer,

    Add position: absolute to this line
    #cssdropdown li.headlink:hover ul { display: block; position:absolute;}

    this stops the items to take up space in the document flow.
    I haven’t tested thoroughly so maybe it might break something else.

  • alex

    hi huys, i need some ideas for a dropdown menu with jquery; i have 3 divs that will be the buttons and 3 divs that will contain the submenus(so each of these three divs will contain some links). to be easier we’ll take for this discussion just one div that will be the button and one div that will be the submenus container(this one is placed above the button div). So…i want when the mouse hovers the button div….the submenu div to show-up…and when the mouse leaves the button the submenu div to disappear. ok…i made this using the jquery’s .hover() adding and removing a class that shows and hides the element(visibility:none). but the problem is that i want on page load the submenu div to be hidden (i tried to simulate user interaction but it didn’t work, i don’t know why ’cause i’m very new to jquery :P , i don’t know where to place the trigger code).

    ok….the big problem is how to make the submenu div not to disappear when the mouse leaves the button area but enters the submenu div area.(the button div and the submenu div are one next to each other)

    any help will be appreciated :P

  • http://hattersworkshop.com steve

    First, thanks for the tutorial. I get CSS dropdown navs now, but Im having the same issue as Kristoffer: when the hover state happens the flow of the site is adjusted for the new elements becoming visible.

    I dont want this. I want the nav to appear above the content of the site? Maybe use a z-layer, but I dont know how or even if that would work here.

    Example:
    http://www.hattersworkshop.com/ftp/csc/index.html

    I tried making different elements position: absolute, but this was always causing a problem in FF 3 where the nev child elements appear behind the text and only become visible when hovered… very strange.

    Thanks to anyone for any working solution they come up with.

  • http://hattersworkshop.com steve

    Played with my code some more and got it.
    Paul’s comment was right on.

    Thanks.

  • http://idolsavenue.com Danny

    Thanks for the tutorial. Though I still have problems between the drop down list and the flash player, I’ve worked around it.

  • http://www.artiajans.net ARTI

    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.

  • http://64.253.36.100/BartolomeiPucciarelli2009/(underdevelopment) Meg

    I love this menu, Nathan. Thanks. Question: Is there any way to increase the space between the navigation item and the menu that drops down from it? My website (in development) is here: http://64.253.36.100/BartolomeiPucciarelli2009/. I would like the drop down to appear below the shaded horizontal bar. (Or do I just have to rework the graphics?) Thanks!

  • http://blog.kuflu.com kuflu

    thanks very nice menu

  • Quin

    mola… me encanta!

  • Sunny

    Thanks! This was a very clear and precise explanation. Continue the good work!

  • http://red-stamp.co.cc akkumaru

    great!
    i thank you!

  • Jared

    Looks great. I’ll use this in an upcoming website re-design – the current drop-down code has been added to several times and has become unmanageable. I’ll remember the z-index. Thanks!

  • http://www.webfixed.net webfixeddotnet

    Superb!!!

  • http://www.ismaildoanxz.co.nr ismail

    thank’s to share knowladge,.i think your site very good for knowladge.,

  • http://typo3-agentur.typo3-fanworld.de Webagentur

    Thank you … this tutorial has me very helped.

  • http://digau.cn bolo

    good post!thank you,i’ll repaint it.

  • mtho

    simple!!, i like it

  • http://www.marcellomanero.com mm

    Thank you very much for the explanation. It’s easy to do, but, how about if I want another dropdown menu inside the second level?

    This example is for 2 levels, somebody could tell the modification to achieve 3 levels??

    Thank you very much.

  • dave

    mr swarm,

    the menu displaces everything when the drop-downs trigger, so it is useless to any website that might actually want to look serious.

  • Abhishek Dilliwal

    Thanks for the post got to learn this in easy way :)

  • Dave

    Still going strong!

    Excellent tutorial and the JQuery bit is super thanks.

  • Dave

    @ other dave..

    You can get around this easily with css. Look into ‘z-index’ and the answer is there…

    Peace

  • http://www.ryanleblanc.com Ryan

    Thanks, Dave! You’re a lifesaver. And to the other “dave” – it’s those type of comments that have caused people to stop sharing useful information like this so freely…

  • http://www.kienthuclaptop.com WAMPvn

    been searching all over Google for a non-complicated way to add reviews and ratings and it looks like this is it.

  • bobby

    This menu do not fix well, as the dropdown push the below content down

  • BUG

    Firefox 3.5.2 BUG, menu jquery :(

  • Shane

    @bobby,

    Like was said here before,..

    Replace:
    #cssdropdown li.headlink:hover ul { display: block;}

    With:
    #cssdropdown li.headlink:hover ul { display: block; position:absolute;}

  • http://studio7notrelesed anirudha

    i say that this is not useful for all browser in web so i use Mozilla extension for this For other browser i use simply css so all browser accept it
    then my script is worked but this script is too hard for learning my script check out mozilla css menu

  • http://jacksmadi.blogspot.com jack smadi

    thats really helpful , thank you

  • User of it

    Great. Hope, took time to add this article with the snapshot on each steps and it worth thousands of people.

    Good commitment.

    Hats off.

  • http://www.webpagecollection.com Selva Comments

    Thanks For this info….

  • http://www.fashionsteel.com Steve

    Does anyone knows how to make ebay like drop down category button?

  • ChrisS

    does anyone know how you would go about animating this so the menu reveals slowly and not instant?

  • JY

    Hi,

    I followed your instructions and the drop down works great. Only problem is, it pushes the part of the site that sits below the menu (ie the content section) down whenever a drop down expands. What might I be doing wrong?!! Many thanks for any help you could offer on this. I’m going crazy trying to work it out (CSS is not my strong point)

  • http://massroundup.com Michael

    Great menu. I integrated it into the wordpress archive dropdown. It works in Ie6, but the content below the menu shows through. I’ve tried setting z-indexs, but it hasn’t solved the problem.

  • http://www.naumanakhtar.com Nauman Akhtar

    Thank you so much for this great Drop Menu Menu CSS, it helped alot.

  • http://blog.getbalivillas.com wie yoga

    does anyone know how you would go about animating this so the menu reveals slowly

  • http://www.thepeoplesayno.com The People Say No!

    This is very nice!! Easy to implement and highly customizable.

    @wie yoga:
    Uset the jQuery example and change the following bits:
    .css(‘display’, ‘block’) to .slideDown(“slow”)
    and
    .css(‘display’, ‘none’) to .slideUp(“slow”)

  • http://www.ec-ftu.org/ iwanttobelieve

    Does anyone happen to know any plugin like this that support menu like this one: http://www.harborchulavista.com/

    Thanks in advanced!

  • Jorge

    Thanks for the tutorial! .

    Can’t make it work with Flash.
    Flash is still in front of the menu.
    Where do you put the z-index in the css ?

  • Daniel

    Thank a lot for this solution!

    I also had som problem with

    position:absolute;

    My problem was that apparently you have to use the strict mode for IE to have your fixed positioned element work properly. So when I inserted:

    at the top of my page it worked great!

    Hope this can help anyone!

  • Daniel

    I saw that my comment did not work. But I found my solution at:

    “http://www.daniweb.com/forums/thread150830.html”

    Cheers!

  • http://www.ydxgx.cn Totty

    ?????????

  • http://www.ydxgx.cn Totty

    not surport chinese!my god!

  • http://www.bamboolabcode.com bamboolabcode

    It’s exellence code.

  • http://designerpk.com sana

    Hi

    I have a slide show that I’ve downloaded from your site and which is running perfectly. On top of the slide show I have a drop down menu. Unfortunately it opens behind the images, which makes it impossible to select the links. How to solve this problem?

    Thank you

  • http://www.bockerl-factory.eu bockerl

    Thank you … this has me very helped.

  • webdev

    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?

  • http://ajax.wespai.com wespai

    thx collect it to

    ajax.wespai.com

  • http://www.webpagecollection.com/ selva comments

    great realease and thanks for sharing

  • tom

    got an issue with ie7 and this line
    #cssdropdown li.headlink:hover ul { display: block; position:absolute;}

    everything works fine but drop down menu is not under parent but moved to right for about 200px, tried many things but can’t figure out how to fix it…any ideas?

  • tom

    added left:0px to #cssdropdown li.headlink ul
    and looks that problem is resolved in ie7

  • http://www.darwicksdesign.com Damien Darwick

    Hey thanks for the info, was looking for a way to sort a menu that was showing improperly and found it here!

  • http://www.xis.be Tom

    i’ve seen better jquery menu scripts …

  • Harry

    thanks for resources

  • http://www.zarajans.com ajans?

    thats really helpful , thank you:)

  • http://www.paradigmasdivinas.com Akj Infinity

    Folk ur great !!! … quite simple and effective. You’re the man, 4real, your the man !!!

  • http://goodgoodies.com adrie

    Please give us another tutorial that focuses on making this menu a multi-column menu. Thank you!

  • jan

    Nice menu! Still a shame IE has to have some javascript to function properly.. Hopefully soon we can just use css with the :hover functionality.

    To place it over any kind of flash movie you have to publish your flash movie with wmode=transparant in and it will fix any html layers on top of the flash..

    cheers

  • http://www.dotnetspark.com Pankaj

    Nice work…Thanks for sharing..Is there any other article on Menu using JQuery?

  • http://www.mediaprojex.com Rich

    Great stuff. However, I still can’t get the absolute position to work in any browser and the menus are pushing down the content below.

    Any help would be appreciated.

  • http://www.tricko.com.br Newton Pasqualini Filho

    Man, you are “the one”!!!

  • Cheeky Moo

    Thanks for this! I tried alot of JQuery menu plugins e.g. Superfish , and they were just too fancy for their own good! Your example is perfick!

  • http://www.digitalthread.com Design Company

    Thanks for this script.

    I’m having a bit of the same issue that a Meg mentioned back in last year (See: Meg
    Apr 17, 2009)… Seems I cannot move the drop down too far away from the top header nav div, or it “breaks” the connection, and the drop down never appears… Maybe the solution is to enlarge the header div. Any one else come across this? Suggestions?

    FS

  • http://www.digitalthread.com Design Firms

    Also, in IE6 – position: absolute doesn’t seem to work… Still pushing items on the page down…

  • http://www.digitalthread.com Design Companies

    Ok. Well, apparently in order to get the design working right in IE6, its necessary to put this in:

    Then it recognizes the position:absolute.. BUT you still need a degrading ie6 style sheet to fix some other styling issues…

  • http://www.digitalthread.com Design Companies

    oops.. it needs to be in “<!–"

  • http://www.digitalthread.com Design Companies

    this:

    [if lt IE 8]

  • http://www.digitalthread.com Design Companies

  • http://www.digitalthread.com Design Companies

    [if lt IE 8]

    script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript”

    [endif]

  • Mark

    nice post – here’s the similar one with the active main button when you mouse hover the sub navigation:

    http://www.sebastiansulinski.co.uk/web_design_tutorials/tutorial/57/jquery_dropdown_menu

  • http://www.thebigbangtheorywatchonline.com manu

    Really nice tutorial.

  • Brent

    Paul was correct. There is a NEEDED FIX to this tutorial and code. Without it, the menu is unusable.

    Add position: absolute to this line
    #cssdropdown li.headlink:hover ul { display: block; position:absolute;}

    This stops the items to take up space in the document flow.

    PLEASE FIX THIS TUTORIAL DESIGN REVIVER !! Otherwise it’s cool.

  • http://www.naumanakhtar.com Nauman Akhtar

    This is great tutorial, thanks for sharing

  • enam

    Great tutorial. I am now following you on Twitter… Hope get this types of stuff in future. Thanks again.

  • http://www.robinjohn.info Robin

    thanks simple trick!!

  • http://www.eteamfromindia.com eteamfromindia

    Nice menu,

    This is very good tutorial.

    thanks for sharing

  • http://www.alibeigi.com ????? ?? ????

    nice tutorial

  • http://www.iranynemetorszag.com Külföldi munka

    You are definitely a skilled writer. You definitely know how to write to keep the audience engaged. Cheers

  • http://www.web-i.org/ prem

    thanks Its so useful, good work
    thanks
    designreviver.com

  • http://www.denisepache.com Denise Paché

    Great tutorial – clean code and well explained.
    Thanks for sharing!

  • http://www.rusanderson.com Rus

    Great tut. Looked everywhere for something simple like this.

    I would like the menu to fade in, can someone show me how this would be done?

    Much thanks.

  • http://scriptsnest.co.cc/index.php mayank

    i read this tutorial before here but didnt used it today i am reading it again to use it on my site..thanks for keeping this so simple. i always git stuck at css.thanks

  • Spider

    Simple tutorial. Thanks much. :)

  • http://www.rpgshow.com/ lace front wigs

    I loved the article. It is very exciting. Thank you for the information. I will be back.

  • http://www.lvnovo.com Replica Louis Vuitton bag

    It’s usefull for me, thank you very much!

  • Bhushan

    hi,

    its not working in IE6. so what to do

  • http://www.visionvirtuelle.ca Siva

    In order to make the drop down floating, we need to add the z-index very high number. I have used the following css and it works for me. Very clean solution.

    $(document).ready(function(){
    $(‘li.headlink’).hover(
    function() { $(‘ul’, this).css(‘display’, ‘block’); },
    function() { $(‘ul’, this).css(‘display’, ‘none’); });
    });

    BROWSE PROFILE

    Most Viewed
    Most Recent
    Highest Rated
    With Videos

    Thank you very much for writing the tutorial. Very elegant solution.

    li.headlink ul { display: none; }
    li.headlink:hover ul {
    position: absolute;
    display: none;
    list-style-type: none;
    margin-top: 20px;
    padding: 0px;
    z-index: 10000;
    width:150px;
    background-color:#fff;
    }

  • http://ygs.im Ygs

    oh yeah ~ thanks

  • http://www.huwrowlands.co.uk Huw Rowlands

    Hi,

    I have made this a vertical menu and all is ok except IE6 – When hovering over the link, the child li is not appearing? What could this be?

    Cheers

  • http://www.design21th.com Web Dizajn

    THx for this tutorial.. an hi for all from Bosnia!

  • naren

    Now i got some idea.

  • http://www.marmaline.com Ibrahim

    thank you very much. Hi turkey!

  • http://www.design21th.com Web Dizajn

    Thx from Sarajevo!!!

  • http://www.design21th.com Izrada Web Stranica

    Very Cool!

  • http://www.becer.org becer

    Very Cool! nice css menü :)

  • http://www.greensurfshop.com green surf shop

    I’m going to try and use this on my site. Thank you!

  • http://gunis.sk diesel

    Very usefull and functional in every browser.
    Thank you very much ;)

  • http://www.kocaeli.net.tr kocaeli

    this is very strong. thank you!

  • http://www.healthlinesystems.com credentialing software

    Sweet list! Thanks for the share, implementing on one of my projects now.

  • http://www.SubmitSeoArticles.com amit

    I am reading your post for a long time and follow you on twitter as well. and must say your site is first point for me to look for helps and ideas on designing.

  • http://persiadl.com persiadl

    really nice jQuery & CSS Tut
    thank you.

  • http://www.sms4luv.com sms4luv

    quite helpful but unfotunately it didnt help me.whenever menu spreads over the link then it starts to malfunction…please help me…help! help!

  • http://www.malereproductivesystem.org Male Reproductive System :

    i admire Craig Newark of craiglists because he became a milionaire in such a short time .

  • http://www.shprint.ir/leto.html ??? ?? ???

    thanks nice css menu

  • http://www.m0ri.com/ sargarmi

    Very usefull and functional in every browser.
    Thank you very much ;)

  • http://new.m0ri.com/ ????????

    really nice jQuery & CSS Tut
    thank you.

  • http://www.webtrendset.com webtrendset

    nice work,thank’s

  • http://www.wall-hooks.org Wall Hooks

    somtimes i also sell stuffs on craigslists because there are many users in it -.;

  • P Hurvinyek

    How to adopt, how does it look like this method in Joomla!??

  • http://www.bijusubhash.com Biju Subhash

    great job…
    thank you for sharing..

    here the link for another one..
    http://www.bijusubhash.com/blog/redbrown-drop-down-menu-using-jquery-and-css

  • http://zcg.pl/ katalog

    I reckon the knowledge laid out in your post is really excellent. I even have been engaged on a preliminary study project on this topic and your weblog honestly helped by using a number of issues that I had. I am writing a explore paper for school and even I’m currently following some web publication for review.

  • http://www.1artmedia.com Valikonen

    Very cool tutorial, thanks. If you want to see menus, web site trends, galleries etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!

  • http://www.ir-dl.com/ ir-dl

    Very usefull and functional in every browser.
    Thank you very much ;)

  • Karl Harshman

    I’ve been moonlighting on website production and I have to say this is the best dropdown menu yet!

  • http://www.papersoup.org Brixter

    This is a very nice tutorial, perfect for my next project!

  • thekenemy

    This is missing something. The dropdown ul should have absolute positioning to take it out of the flow. This seems to fix the dropdown pushing everything out of its way, and the dropdown disappearing sometimes in IE8.

    • http://www.facebook.com/profile.php?id=559943135 Vikas Sunny Christopher

      Exactly, made my head scratch a bit as well. just set the child ul position to absolute and it will work fine

  • http://www.sonnydesign.com sonny

    great tutorial! keep it up

  • http://endlesshybrids.com Jeff

    Lot of spam comments here from people who obviously didn’t even try to get this example working in IE. It doesn’t.

  • http://astaza.com/ gamezat

    Awesome ;) but not work with new ie and need to set pos value in css
    thank you any way

  • http://www.atasozlerianlamlari.com atasözleri

    Thanks you very much! Wonderful and simple menu! I love jQuery..

  • http://www.bittigibi.com bitti gibi

    thanks for sharing great work ;)

  • http://tidydesign.com Tidy Design

    Cool post, will try this out :D

  • http://caprisdesign.com capris

    special thanks for your great post

  • http://ndscardsale.org ndscardsale

    There is only grievance of Nintendo users is that the Nintendo’s are only capable for playing games.

  • http://www.onlinevideoslots.be online videoslots

    I am so going to try this out on my website. very nice tutorial. Thnx alot.

  • http://www.beyoncelacefrontwigs.com/ beyonce lace front wigs

    it’s very very good description, learn many jquery & css. thanks, i will come.

  • http://www.shprint.ir ???

    Very usefull

  • http://www.alibeigi.com ????? ????

    It’s usefull for me, thanks for sharing

  • http://www.sandalitservices.co.uk Robert

    Thank you for this, it has helped me out no end.

  • http://www.5starstour.com ocean

    longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery

  • http://cardbaba.net/ Cardbaba

    one more great tutorial
    thank you

  • http://www.itdesigner.ir itdesigner

    great tutorial!

  • http://www.sandalitservices.co.uk website design

    many thanks for yet again another great tutorial

  • http://whoviewedmyfacebook.com/ valime

    A very helpful tutorial for one of my websites. Tried with some plugins but in the end your tutorial helped me more. Thanks :)

  • Bear Media

    Awesome post will try this out on http://www.bearmedia.co.uk

  • DistantEnd

    a simple but useful tutorial,thanks for sharing

  • Jenna Major

    Hi, I have tried the code. It works for all the browsers except Internet
    explorer. But the demo works on IE. Am i doing something wrong? San Antonio Bankruptcy Attorneys

  • Karen Patrick

    I want to have a long menu expanding all the way to the right of the screen,
    but had a submenu. It would most likely cutoff, since the submenus are
    meant to expand to their right. Any suggestions on how to fix this? bankruptcy dismissal

  • emy
  • Rachel Page

    Nice code. Thanks. How do you have a one font color and background for menu and another for submenu items. Also, how do you toggle font color and background for selected submenu items?

  • Upexa Bhalodia

    thank very help full