JavaScript Dropdown Menu

This script has been replaced by a new with multi-level support here.

This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>

You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Click here for a vertical flyout version of this menu.

By Request: Slideup version demo.

Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. Thanks to Paul and Deigo for the suggestion.
Update 4/28/2008 – Fixed flicker issue in FF2 on Mac and “-1” error in IE when quickly moving from the menu to the browser. Thanks to Philip and Chris for reporting these.
Update 5/16/2008 – Optimized the code reducing size by ~15%.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Neil

    Very good. Thanks very much Michael. I tried it on a page with a couple of mootools snippets and they all got along very well ๐Ÿ™‚ No conflicts.
    Keep up the great work!

  • Paul

    Looks very nice! Although I’d rather use a <ul> structure…

  • @Paul, actually, an ul inside and dl it would be perfect ๐Ÿ™‚

    dt Dropdown 1
    li Option 1
    li Option 2
    li Option 3

  • @Paul – The content of the dropdown could easily be an unordered list with little modification. Just switch up the HTML a bit and add the appropriate CSS classes.

    @Diego – Excellent suggestion. I definately do recommend using existing HTML tags in lieu of classed divs. I will take a look at incorporating those tags and update the post if I like how it works out. I have never actually used definition lists in any project so it will be new to me. Thanks.

  • Pingback: roScripts - Webmaster resources and websites()

  • HA! That is so funny, a friend of mine just sent me a zipped up javascript menu today..and this is it.

    VERY easy to customize, a real treat.

  • Pingback: Skylog » Blog Archive » links for 2008-04-29()

  • Very nice Micheal! Works well in IE and FF!

  • Is it hard to make a submenu with this example?

  • @Augusto – Submenu functionality is not incorporated currently as I wanted to keep it as simple as possible for those that did not need them. It wouldn’t be too difficult to add a popout submenu though. You would treat it as if it were its own independent menu and position it in relation to the top level menu selection. Of course you would also need to cancel the timer on the primary menu when you enter the second level menu. Just shoot me an email if you need assistance.

  • Cool, but… what about keyboard navigation? And submenus? Maybe in 2.0 version ๐Ÿ™‚

  • @Walmar – Absolutely, I have had a few requests for submenus so I will get that as well as keyboard navigation added in soon so check back shortly.

  • Pingback: links for 2008-04-29 « toonz()

  • Pingback: ใ‚ขใƒ‹ใƒกใƒผใ‚ทใƒงใƒณใคใใฎใƒ‰ใƒญใƒƒใƒ—ใƒ€ใ‚ฆใƒณใƒกใƒ‹ใƒฅใƒผใ‚’()

  • Pingback: StyleCrunch » Blog Archive » Sliding JavaScript Dropdown Menu()

  • peter

    Nice work, I hope you are recognized for your efforts. Do you have development on a similar but vertical flyout menu? That would complete the set!

  • @peter – Thank you. I have a few more scripts on my list and will definitely add a flyout menu to it. I am always open to suggestions. Just email me.

  • Pingback: javascript menรผ - Volkan ลžentรผrk()

  • hi

    whats the best way to add a top-level item to this nav that doesn’t have a drop-down menu attached?


  • @hasta – I helped someone else with this a few days ago. You can see what I demoed to them at Basically you want to create a block link and float it to the left. Shoot me an email if you run into any problems.

  • thats great. thanks for the speedy reply

  • Pingback: Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog()

  • Gary

    How do i sent it to make the menu disply on the right instead of down?

  • @Gary – I have started working on that, hopefully I will finish up in the next couple days. There are a couple issues that make it a little less easy that just changing a couple variables. Feel free to shoot me an email in a couple days if I haven’t posted an update.

  • Grace

    Is there a way to change direction of the slide down javascript menu? If so how do you do that?


  • @Grace – I hope to have a vertical menu released tonight or tomorrow. If you are looking for something else let me know.

  • Pingback: Vertical Flyout JavaScript Menu - Web Development Blog()

  • Todd

    WOW this is a great script! Would it be difficult to change it to slide up and with a submenu that could slide up also and overlap? or would that just be too hard to configure?

  • @Todd, I just put together a slide-up version this morning on request at As for the sub-menus, it is definitely on the to-do list. I will shoot you an email when I have it ready.

  • Tom

    This is a very nice script i will certanly be using it asap my only concern is accesibility. If the browser dosent support javascript or the user has it turned off the navigation is totaly hidden. I have slightly modified the code to use an onload hide function which solves this. If the comments are removed the modified script is only 1.54kb. Have a look at the modified script @

  • @Tom – Thanks for the feedback. I am big on accessibility and depending on the implementation and requirements it can be handled differently. You could mesh the script along with an onload and the :hover pseudo-class to create a non-animated dropdown when JS is not present, of course that would require browser support for :hover. Alternatively you could just have the main dropdown link something like this… <a href=”link.html” onclick=”function(); return false;”>link</a> where it could link into a top level page or landing page of some sort. Thanks for sharing the zip.

  • Tom

    @Michael – No problem hope it can be of some use to others, congrats again on the great script.

    p.s. forgot to mention the slight alteration i made to the list css too:

    …<li><a href=”#” class=”top”>Navigation Item 1</a></li>
    <li><a href=”#”>…

    .dropdown a {border-top:1px solid #b9d6dc;…
    .dropdown {border: 0;}

    I do alot of work with CMS and styling lists like this makes automated population easyer and saves a few more bytes =)

  • I had a dropdownmenu on my site but i was not satisfied, but now I do!! This is perfect! It’s very easy to use, thank you very much :).
    A satisfied girl from the netherlands ๐Ÿ™‚

  • Joey

    I’m also from the Netherlands.
    I like the menu very mutch and it’s beautiful.

    But I have one question about it:
    Is it possible to make a sub-sub menu?
    A Navigation item 1.1.1?
    The first 1 is the Horizantal menu button
    The second 1 is the first drop down menu item
    The thirt 1 is the sub menu from the second 1.

  • @Joey – Have had this question a few times so I will be adding multi-level support in the next week. I will notify you and others when I have it live. If you cannot wait then it should not be too hard to extend the current script.

  • Sac

    nice work done, but i need sub-sub menu. hope i’ll get soon…

  • can there be a multi column dropdown version of this script? I’ve been looking around for one for a year and no one has done a sleek dropdown like yours.


  • @joachim guanzon – Shoot me an email I can help you out. You should be able to just modify the CSS and markup to get multiple columns.

  • Slash

    Hey, just wanted to say I’m using this script for a website I’m designing and it works great. (Though it seems to run slow on Opera and Firefox, for some reason)
    I had a semi-outside question, in that I can’t figure out how in the world to center this. Forcing the menu to the left side of the page would work, but centered looks better. =) I’ve tried surrounding it with “margin: 0 auto” divs but that hasn’t helped any. Any ideas?


  • @Slash – Different browsers handle the timeout speed a little differently. In particular IE will usually seem faster than others but it is not performance-related, just how they handle things. I helped someone with a couple issues including centering and you can see it at Shoot me an email if you can’t figure it out from viewing the source on that demo.

  • I like this menu a lot, but it’s just got a few things I can’t get working.
    > Would it even be possible to get onclick and onblur working? (I know dt doesn’t support onblur).
    > Is there an easy way to position the menu? Like, right or left? I’m asking because the dropdown will have multiple instances and they can be on the left and/or right side of the page. Left is fine like it is, but the ones on the right have to have their extra width go left of the ddheader, being pinned to the bottom right corner of the menu.

  • m3talc0re – The things you mentioned here should not take too much customization. The menu should support whatever mouse events you need and the positioning can be completely controlled through the markup/css, you are not locked in to floating everything to the left. I would be happy to help you, just shoot an email with a link.

  • Sac

    Hi Michael! I need sub sbu menu, will u please tell me when u’ll post that.


  • @Sac – Certainly, will do my best to get it out this week.

  • Slash


    Thanks for the help previously. I was trying to avoid having to have a fixed pixel width for the page I’m designing, but it looks like that’s the only way to get it to center appropriately.

    One more question though, is there any w3c-valid way to make the top entry of the list (that is, the part you rollover to get the rest to drop down) into a link? Putting an anchor around the whole <dl> area works, but the validator gripes at me. =)

    Just curious, thanks!

  • @Slash – I believe both of your issues can be resolved. Shoot me an email with a link to where you are now and I will get back to you when I can with my thoughts.

  • This is great, I will use it for one of my client sites.


  • @slash,

    If it has succeeded to make a link in the head part. May I then have your script so that I also can use a link in the head of the dropdown menu balk.

    Thanks, that you would make a sub-sub-menu. I’m still waighting at the release.

    It’s possible that there are a few language errors are in my comment. Because I live in the Netherlands and my English isn’t very good.

  • Solnyshko

    I need that selected index would be displayed on the screen and I can’t do this,could you help me,please

  • @Solnyshko – Not sure exactly what you are asking. Shoot me an email with clarification and I will do what I can to help.

  • Hey Michael. Thank you for making your code available, I think a lot of people appreciate it a lot.
    Unfortunately I ran into the IE z-Index bug with your menu solution, might be an issue for others too. Send you an eMail.
    All the best

  • Hi Michael,
    Is there an easy way to make the background of the dropdown menu transparent ?

    Cheers !

  • Stephane – To make the background completely transparent you could just remove the background color on the list elements in the CSS.

  • Lars

    Solved my problem by using different positioning for certain design elements.
    Thank you


  • Lawrence

    Hello folks,

    Below is part of a drop-down menu i’ve created for my project. On I.E. Sub-menus onhover appear downwards. May i know what do i need to change on the Javascript/CSS/etc. to make sub-menus onhover to appear to the right side please? Thank you very much for your promt answers.


    <ul id=”sddm”>

    <a href=”smoking_index.html”

    onmouseout=”mclosetime()”>Living life as an addict</a>

    <div id=”m1″


    <a href=”smoker.html”>Who’s a smoker?</a>
    <a href=”smokerlife.html”>How’s a smoker’s life like?</a>
    <a href=”facts.html”>Facts</a>



    var timeout = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    function mopen(id)

    { mcancelclosetime();

    if(ddmenuitem) = ‘hidden’;

    ddmenuitem = document.getElementById(id); = ‘visible’; }

    function mclose()

    { if(ddmenuitem) = ‘hidden’; }

    function mclosetime()

    { closetimer = window.setTimeout(mclose, timeout); }

    function mcancelclosetime()

    { if(closetimer)

    { window.clearTimeout(closetimer);
    closetimer = null; }

    document.onclick = mclose;


  • @Lawrence – This may be what you are looking for

  • Hi Michael! This is such a cool dropdown menu. Ive been playing and testing it with succes. But I cant figure out one thing. How can I <a href the main menu items? The way im doing it is wrong cause im getting the submenu css properties.

    I hope you can help me with this, Thanks! ๐Ÿ™‚

    Juki -> Netherlands

  • @Juki – You would just need to nest a link in the dt. Of course you might want to make the link a block and alter the dt CSS so the link fills the entire area. Shoot me an email if you can’t get it worked out.

  • joey


    What’s the status of the sub-sub menu?
    I’m still waiting at the release.

  • @joey – Had hoped to release last night but have run into an ugly IE6 issue as usual. Will continue this evening if I have some time.

  • Bill

    Awesome! Thanks for sharing this. One question: How can I change it so that the menu background fades to only, say, 75% opacity?

    Thanks again!

  • Michael, Love the menu! I was thinking of doing something similar using, but then I came across your menu. It looks good and it’s much more lightweight than the version would be, I think. Anyway, I really need an additional level for the site I’m working on (you know, the sub-sub menu everyone is asking for). What is your eta on having a working version of that? Thanks so much!

  • @Erik – I would like to say this evening but I can’t say for sure. All I lack is a stubborn IE issue I have to work around. I will shoot you and others an email when it is active.

  • John Devriesch

    Hello Michael, what a splendid menu! But I have a small problem.
    When i use your menu, and say use 5 menus in a row beside each other, and i want one button to have no dropdown-menu but only a link, how do i inplement this in the html? or should i use, for this single button, a mouse-over script. Thanks, John

  • @John – It really depends on your situation. You could just use the same style in the CSS for the dt tag on a class for your static links and then simple add in a link where you need it. There are a few ways to tackle it. Shoot me an email if you need help.

  • Andy

    Hi Michael, The drop down looks great. Thanks for sharing. I just wondered if you have created or seen anyone use unordered lists layout for the drop down trigger instead of definition lists? I’m hoping to incorporate this into a site using the modX CMS.

  • @Andy – Originally the menu was using block links and unordered lists so it is definitely possible with little modification. Shoot me an email and I can help you work through it.

  • @Michael,

    What do I wrong to make a link in the head section:
    My dropdown.html file:

    <dl class="dropdown">
      <dt id="1-ddheader" onmouseover="ddMenu('1',1)" onmouseout="ddMenu('1',-1)">
      	<a href="/index.htm"><font color="#232323">Algemeen</font></a></dt>
      <dd id="1-ddcontent" onmouseover="cancelHide('1')" onmouseout="ddMenu('1',-1)">
          <li><a href="/index.htm"><font color="#232323">Home</font></a></li>
          <li><a href="/contact.htm"><font color="#232323">Contact</font></a></li>
    	  <li><a href="/forum/"><font color="#232323">Forum</font></a></li>	  
    <dl class="dropdown">
      <dt id="2-ddheader" onmouseover="ddMenu('2',1)" onmouseout="ddMenu('2',-1)">
    	<font color="#232323">Gratis software</font></dt>
      <dd id="2-ddcontent" onmouseover="cancelHide('2')" onmouseout="ddMenu('2',-1)">
          <li><a href="/Gratis%20software/index.htm"><font color="#232323">Gratis 
    <dl class="dropdown">
      <dt id="3-ddheader" onmouseover="ddMenu('3',1)" onmouseout="ddMenu('3',-1)">
    	<font color="#232323">Tools</font></dt>
      <dd id="3-ddcontent" onmouseover="cancelHide('3')" onmouseout="ddMenu('3',-1)">
          <li><a href="/Tools/Radio/index.htm"><font color="#232323">Online 
    <div style="clear:both" />

    And my Stylesheet .css file:

    body {margin:25px; font:12px Verdana, Arial, Helvetica;}
    * {padding:0; margin:0}
    .dropdown {float:left; padding-right:5px}
    .dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/menu/header.gif)}
    .dropdown dt:hover {background:url(images/menu/header_over.gif)}
    .dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
    .dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
    .dropdown li {display:inline}
    .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
    .dropdown a:hover {background:#d9e1e4; color:#000}
    .dropdown .underline {border-bottom:1px solid #b9d6dc}

    Joey; The Netherlands

  • @Joey – It will be a lot easier for me to look at if you can send me a link to your page.

  • @Michael

    I have send a mail to you. With my websiteadress and information.

    Joey: The Netherlands

  • Blix

    Thank you for this wonderfull dropdown menu. It really is the best of its kind !

  • Lawrence

    Thank you so much Michael for leaving me your reply. And i’m terribly sorry for this late reply. You are just that one-of-the-kind nicest person around.

  • JB

    First things first, this nav is outstanding, and it makes idiots like me look like a wizard. for that, i think you greatly. On to the point…

    This may be somewhat contrary to the concept of a CSS nav, but i have… unique clients that require the use of an image as the main nav link, with the animated flyout. I was wondering if there’s a decent way to do this instead of using a css text based top nav link?

  • COdie

    Hey, I love this script:) Its great.

    Could you please tell me how i would go about making sub menus for this, like, having a dropdown menu within a drop down menu. Thanks.

  • @JB – Sure, you could just remove the padding from the dt and add in an image or use CSS background images through the use of different classes for each. Shoot me an email if you get hung up on anything.

    @Codie – I have been working on this and will hopefulyl get some time to look at it again.

    There are a few tricky issues, particularly with IE.

  • COdie

    @Michael, that is exactly what Im looking for, could you post the source code for that, sorry im still noob, only started about a month ago. Thanks.

  • @Michael, Looked at your sandbox version of the multilevel nav. I took a quick look in IE6 and didn’t notice any immediate issues. Maybe I didn’t look hard enough. Can you explain the issues you are seeing and trying to resolve?

    Again, thanks for all your work on this menu and your willingness to share. You have really done an amazing job!

  • @Michael, Actually I just modified your code to fit my needs and I see more of a problem with my multilevel version in IE6 than I see with yours. I’m not sure where I went wrong… Have a look if you’d like.

  • @Codiue and Erik – I will try and wrap it up today. I fixed another bug yesterday and have 2 left. I will add a new post then.

    @Erik – As for your issue, looks like an IE only thing. I really need to spend my time wrapping this up and then after I release the final code if you are still having problems I will take a look.

  • mothra9999

    excellent code!
    question: is there a way to have the dt element (‘Dropdown One’ in the demo) stay ‘active’ with the hot color (darker color in the demo) when you mouse over the dropdown items instead of switching back?

  • @mothra9999 – It would have to be done with the JavaScript, it should only be two lines of code. One in the ddMenu that appends another class to the header and then one in the ddCollapse function that removes that classname. Shoot me an email if you can’t get it figured out.

  • Eric

    Thanks for the great example! Is there any way to make it so the drop down opens and closes on click instead of on mouseover?
    I got it to open on click by changing the mouseover to this: onclick=”ddMenu(‘one’,1)” which works. Though is there a way to get it to close by clicking on the main menu tab again?

  • @Eric – It can definitely be done. I am a little tied up the next day or so but shoot me an email if you can’t get it worked out and I will do what I can to help.

  • Chris

    Michael – Great script. Very clean and straightforward. Excellent job as far as I can tell.

    I’ve been playing with the multilevel and noticed if you hold your mouse over a sublink (IE7) and just let it hover there for 15 seconds or so, the page length starts to buildup and te scroll bar on the page keeps increasing.

    Not sure if you were aware of that. Great job though!

  • @Chris – Thanks, yea I am aware, it is one of the couple remaining issues with the script. I just haven’t had any time lately to wrap it up.

  • haymaker

    Michael – thank you very much for this script! This is the coolest dropdown menu I’ve found. Really, really great.
    However, I am having a problem with the menus flashing and displaying behind a .swf – in IE and firefox. I’ve added wmode=”transparent” to my object and embed tags for the swf, but still no joy. Have you seen this before? Any suggestions?

  • @haymaker – Email me a link and I will look into it. If you have the flash embedded correctly it should not be an issue.

  • Louis

    Awesome, this solves my problem with my non-flash commitment. Thanks a lot!

  • Jorge

    Great job. Waiting to see the multilevel one.

  • Great job. I do have a problem however, I’m using this drop-down bar for a wiki, and it tends to render wrong (submenus are shifted towards the right). Any suggestion? I myself am not such a CSS/JS expert…

  • @Antoine – Have you checked to be sure that your CSS is in place and that none of your existing CSS shares the same class/id names as the dropdown styles? Shoot me an email if you don’t see a conflict and I will dig into it.

  • Ben

    Michael, any luck with the problem that haymaker was having? I’m having a nightmare with Firefox 2 on Mac when the menu appears directly above a Flash object. I’ve tried everything I can in terms of z-index, wmode=transparent (and opaque), etc. etc., and am having no joy.

    I think my last option must be to just detect for FF2 and show an image instead of Flash?

    Any help would be much appreciated.

  • Ben

    Oops and I forgot to say what my problem even was! Basically, it’s to do with FF2’s hatred/refusal of the CSS ‘opacity’ property when combined with Flash (on Mac at least). As soon as the menu slides down (and thus the bits with opacity on them touch the Flash object), the Flash disappears completely. I’ve found some info about this here:

    But have been unable to apply his fix to this menu.

  • veeru

    Hi Michael, its really good work. Do u have any idea how to use menu source as xml like ajax switch menu

    Thanks alot

  • @Ben – I was not aware that FF had an issue like that. Unfortunately I do not have a mac to test on so getting that resolved will be difficult. If I can get hold of a mac I will check it out else let me know if you ever get it resolved. Thanks.

    @veeru – Sure, it wouldn’t be hard to parse XML for the menu structure. I will add JavaScript XML parsing to my post todo list.

  • Agreeing with everyone.. GREAT script. Two quick questions… 1. Can this work together with your other script “Sliding JS Menu Highlight”

    and 2. Can this work without using a DL and just use a div and ul, li combination (as that’s the way I have the Sliding JS Menu script working)… Let me know. – Thanks again!

  • Ben

    Thanks for replying Mike. My solution was to just place the Flash object in a div with a background image that looks identical to the Flash (just without animation), so that when the Flash does disappear, the FF2 Mac users will hardly notice.

    The CSS-transparency-freaking-out-with-Flash issue has been fixed in Firefox 3 so there’s no need to worry about it really!

  • veeru

    Dear Michael

    Plz let me know that when ur trying to give support for xml datasource. Thanks alot

  • @fridtz – Sure you could combine the two scripts, should not be a problem. It would also be a pretty easy change to use simple unordered lists Shoot me an email if you need help.

    @Ben – Glad it got resolved.

  • mahyar

    Nice menu. ๐Ÿ˜‰

    i have been trying to center the menu but, whatever i do, it still pushes the dropdown to the right.
    is there a way to fix that?

  • Bharat

    Very nice menu.

    I have been waiting for the multilevel menu. Can you tell me when would that be live.


  • Hi,

    I tried to use your Sliding JavaScript Menu Highlight script with this one. However, I couldn’t get both of them work at the same time.

    Any ideas?

    Dropdown menu is under apartments.


  • You can contact me from gercekkATgmailDOTcom

  • Pingback: jsedlak » Blog Archive » Theming SharePoint (5 of Infinite)()

  • ignacio

    Hi ! this script is awesome ! i try to embedd it into a WordPress blog, but i don’t know exactly how to do it… i uploaded the .js and the css to the theme’s folder, and then past in the header.php the html code … but i’m afraid i need to write something in php language … ? well, any tip will be welcome !

  • @ignacio – It depends on what links you will including in the dropdown. Shoot me an email with the details/link and I will point you in the right direction.

  • Lauren

    Hi! Excellent script, but have a question if you have the time to answer. I used the src code and scripts for the sub-sub menu, got it working on it’s own. As soon as I use it as an include file in .asp it stops working. Any suggestions? I had used your sub menu dropdown and it was great, then the client needed sub-sub menu dropdown, so had to change and now can’t get it working when it is included.

  • @Lauren – That doesn’t make much sense unless there is a JavaScript conflict of some sort. There is nothing specific to ASP that should cause a problem. Shoot me an email with a link if the site is external and I will dig into it.

  • Thallah

    Thanks a lot for this nice looking piece of work, Michael… I played around with this script today and noticed that after the menu slides down and up again, there’s a small 4 px wide area underneath it… you can check this easily if you set a black background or turn opacity to 1 and take away = currh / c.maxh; and // = ‘alpha(opacity=’ + (currh * 100 / c.maxh) + ‘)’;… i checked = currh + (dist * d) + ‘px’ for this and actually this variable never drops below 4px… i’ll keep on working it, but maybe you have an idea why that is and can help me out… hope to hear from you ๐Ÿ™‚ <- using FF3/SeaMonkey

  • Thallah

    ok, i am a little step further with my problem (above post): it seems like there is some issue with DDSPEED. when i set DDSPEED to < 2 everything works fine but any value above 2 will lead to some (not wanted) space below the menu bar, the size of this area changes with the value of DDSPEED (a value of DDSPEED = 100 will leave an area the size of Navigation Item 1 and 2 for example)… a value of DDSPEED = 2 and DDTIMER = 35 will lead to an acceptable result. i still would be interested in your opinion if there is any (other) way to fix this, otherwise a comment in the .js file might be helpful.

  • Thallah

    allright, i changed a single line of your code and now it works fine for me: instead of if(dist <= 1 && d == 1) in your ddSlide(c,d) function i just used if(dist < 1) so that dist will be set to one on expand and contract, not only expand. if you know that this will lead to some unexpected result, please let me know ๐Ÿ˜‰ again, thanks for your code, it really was fun ‘reading’ it, guess i learned quite a lot today

  • Trung

    Link Menu root? Ex: Link: menu: Home, Conntact.

  • sijo

    In IE(6) when the dropdown menu is collapsed the menu is not completely hidden but a tip of the top area of menu is still viewable.Anybody noticed this?Any solution?

  • I have 4 of these menus on my page. For some reason, only one is working. Any ideas?

  • Thallah

    i discovered the same problem… just replace if(dist <= 1 && d == 1) with if(dist < 1) in the js ddSlide(c,d) function

  • @Thallah – Sorry I didn’t get back to you sooner, glad you got it worked out. Thanks for the little fix you posted too, I will take a look.

    @Trung – I am a little confused by your message. Shoot me an email with a better explanation of what you are looking for.

  • Bharat

    Dear Michael,

    I am still kinda waiting for the multilevel menu. Is there a way you can tell me how to make it.


  • Wow, this is a really great script… Very easy to use! I’m relatively inexperienced with javascript, but updating this seemed to be a snap once I figured out all the css properties.

    Having one small problem with it. A number of the pages I’m working on have embedded Youtube or Google videos on them. On some browsers the dropdown menus appear behind the first video instead of in front of it, essentially cutting off the bottom of the menu. What can I do to avoid this problem?

    Here’s a link to the workpage of the site I’m using the script on: If you could give any feedback on the video issue, or any other concerns you see, it would be much appreciated.

  • JP

    Thank you for the great code. Nice job!

    I have a question. When less than three navigation items used in the dropdown and after having it rolled over, it leaves a light shadow at the bottom of the menu box. Is there way to get rid of this shadow?

    Thanks in advance,


  • Rahul Bairathi

    Hello, Actuallly i m a beginner in this…so please tell me how to use your codes in the edit html of the blogger

  • Rahul Bairathi

    my email address is

  • palaniappan

    HI michael you are really great. i thought you would not reply to my mail regarding accordion. but you sent the mail with solution. hat’s off

  • Nekita

    This is such a lovely menu.
    Not trying to sound impatient, but is there any progress on the multi-level support yet?

    Thank so much!

  • @Pete – You need to use the wmode attribute, set it to transparent.

    @JP – I believe Thallah may have posted a fix above. I have not looked it it yet so I cannot say for certain. I will try and get a fix posted soon wither way.

    @Rahul Bairathi – I don’t know anything about the Blogger editor, sorry.

  • Hi,

    The menu bar can’t change image on hover (header_over.gif) in IE6. But it seems that the multilevel version is ok in IE6. Is there any fix for this for the non-multilevel version?


  • Dane


    Great great menu! ๐Ÿ™‚ Thanks so much! I’m planning on using it in a site i’m developing. ๐Ÿ™‚ However, i do have a problem..when i go to the multi-level drop down page and download the webpage completely, if i run it locally using firefox, it seems that the codes don’t work anymore. The top level menu doesn’t even drop. Can anyone help me on this? Appreciate it a lot!

  • dave

    i have the drop down menu working well, i would also like the slide up, on the same page.

    how do i implement the slide up effect?


  • dave

    i have the slide up working successfully, but i can only get one of them to work on the same page – not both – any suggestions? thanks ๐Ÿ™‚

  • Micheal,
    Did you get the submenu code posted/finished. This is great but I need to have horz. subs under a few of the dropdowns. Thanks Greg

  • Pete

    Wonderful, think I have it figured out. Thanks for the help!

  • Brian

    There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure

  • joy

    hey, i have a question, what if you are using table instead of <dl>? how can you modify it? it seems like its not working if you’ll embed this to a table tag

  • KJ

    This is probably a dumb question, but the dropdown only seems to work when the mouse is above and below the text. When it is on the text the cursor turns to the text tool and the dropdown disappears.

  • KJ

    Nevermind – I had a conflicting div and just had to change the z-index. Sorry! Thanks for the great tutorial!

  • Pingback: Bookmarks about Dropdown()

  • @Vincent – IE6 does not support the pseudo hover effect on divs. You could replicate the hover functionality with JavaScript if the lack of IE6 support is an issue.

    @Dane – Doesn’t make sense why it would not work. Is it only not working in Firefox?

    @dave – You would need to merge the scripts, if you simply combine the two some of the functions would conflict.

    @Greg – Still not published, just keeping up with emails and comments takes most of the time I used to have to post. Hopefully soon. You might look into combining the dropdown and accordion scripts.

    @Brian – Not seeing the issue. Shoot me an email with more info so I can try and replicate. Thanks for reporting.

    @joy – I definitely would not recommend using a table. Is there a reason you have to use one? Email me.


    ive been through a million java menus all taking up way too much time. this is by far the best your a life saver

  • dave

    thanks for the reply.

    i am also having a slight problem with displaying the menu in Safari. i have set up the menu to roll over an embedded flash movie, which is fine for most browsers, but in Safari, when the menu is rolled over, the movie dissappears.

    Any clues on this?

    Thanks a lot.

  • awe

    Hey! a great script! I have been looking for this a a loong time ๐Ÿ™‚
    Could you help me out with the way to make it “onclick” instead of “onmouseover”? Also, is it possible to have the content visible first and then by clicking the header would hide the content? Your current script is just opposite ๐Ÿ˜›
    Thanks a lot!

  • Steve G

    After spending days looking at many, many drop downs, I stumbled onto this one. It is fantastically straight forward to use. I am trying it on a frames page where the drop down parent appears in the banner frame at the top if the page. A problem I face is that the drop down navigation links are “hidden” behind the frame that is below the banner frame. To see the drop down navigation links, I must increase the number of rows designated for the top banner frame which compromises the total page display. Using the target tag, I have no problem making the selected navigated link appear in the bottom frame. Is there any way to cause the drop down navigation link to display at the front of all open frames? With such a display, the display rows of the banner frame could remain the original amount. Thanks again for a great tool!

  • Hi, this looks really great. I want to try and integrate this into some content managed sites which generate unordered lists. Is there any news on it being integrated into a standard unordered list?

  • Hi Michael,

    I’m having the same issue as Vincent — I need the hover effect to work in IE6 desperately; I’m not familiar with the code to enact the necessary javascript, and was hoping you could send me an email with the changes?

    I’d appreciate any help at all though, as this is one of the last few things I need to attend to in finishing this project.

  • @dave – Email me a link if you like and I will take a look when I can.

    @Steve G – Not sure of a resolution off the top of my head. Email me a link and I can investigate.

    @Henry – There would be no JS involved to change the dropdown to a list so if you are familiar with html/css give it a shot.

    @Seuldieu – Basically you would need to do something like div.className += ‘ hoverclass’ on hover and then remove the class onmouseout. Hopefully that makes sense?

  • I am loving this script. It is doing exactly what I want it to do. I would like the main horizontal nav to be also a UL. Does someone have the code of how they integrated this? I can’t seem to get it to behave like I want it to.

  • Pingback: Zintak» Blog Archive » Sliding JavaScript Menu()

  • What should I change to get the slide-up effect? I viewed the .js file for the slide-up demo page, and replace it with the slide-down one, now it is not working at all. can you explain?

  • oh nevermind, it works now. changed the CSS ๐Ÿ™‚ thanks!

  • Hi
    we have been looking at JS menus in depth – used a couple but for one requirement we need to have some 3,000 entries in the dropdown list – clients wish not our recommendation
    can you let me know if your function will handle this or any suggestions what we should do instead


  • Awesome script and easy to use. However, how do you give the top item an href. I don’t need a drop down on every link, but don’t know how to make the top level a link. i get some funky stuff when I do something like this:

    <dl class=”dropdown”>
    <dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)” ><a href=”#” title=”Home”></a></dt>

    I’m using image only rollovers sometimes. No text link.

    Thanks again Mike

  • Ok. Think I got it. Hope this helps someone. if you just want an image bkg rollover with no dropdown on the top level, you html should look like this:

    <dl class=”dropdown”>
    <dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)” ><a href=”” title=”Home”></a></dt>


    #nav dl dt a {width:auto; height:18px; background-color:transparent; margin:0px; padding:0px}

    Maybe not the best way, but worked for me. If anyone has a better way, i’m open to suggestions. Just trying to give back a little.

  • Have another question, in FF and IE 7, the button blinks the first time you rollover it, and then operates normal on second rollover.
    Is there a fix for the “blink”.


  • LAmaster

    in FF2(FF3 IE6/7 etc. normal) it works slower, whats the problem?

  • Biren


    Is there any way to close the dropdown once you hit any of the items in the dropdown? Like how can i collapse the menu after someone clicks on an item. Right now i have to physically mouseout of the dropdown in order for it to disappear. Please help. Thanks.

  • Hello and thank you for providing this awesome script! I’ve ran in to two small issues. Tested locally and all ran fine – tested online and for some reason the page loads before the the js file is read (i assume) and as a result, the menu displays vertically and all the sub menus are visible. So the site content is loading half way down the page. Here’s a link:

    The other thing is way less critical. I notice in IE6 once i mouse over a button, the mouse begins to flash and continues to do so until I load a different page.

    Thanks again!

  • Amazing 1-Level-dropdown!
    Iยดm searching for a new drop-down for my page, but I must have a 2-level-drop-down. Means, there must be a field which slides out to the right for more detailed links.
    Ouhm, hard to translate for me, but I hope you understand what I mean, and I hope you can help me out.
    Best wishes,

  • Blackwell

    Awesome, scripts, Michael! I’m using this dropdown script and your accordion script on one of my sites.

    @Bill on 09 Jun 2008, regarding keeping the opacity of the dropdowns at a certain percentage:
    I was able to do this by changing line 53 to: = currh / (c.maxh * 1.2);

    (try varying that number to adjust.) However, it doesn’t seem to work in IE (I’m using v7). It worked great in FF and Safari on Mac and PC, and in Chrome on the PC.

  • Mark

    Great script! I had one question, I’ve tried using transparent PNGs (partial backround transparency) with this script and it actually cancels the transparent nature of the PNGs for some reason. Is there any modification anyone can think of in order to allow transparent PNG to be used with this script?


  • Vishal

    Just merged in the css code from the Vertical version of this, to make the top lables linkable (@trung, i think).
    Here: Hardly a breakthrough, I know, but I’m new at this whole CSS thing, and holy crap, I did something. ๐Ÿ™‚

    Now, can someone post a working submenu version? Nice little bundle would be nice. :))

  • Pingback: Dynamic DropDown PHP/AJAX - EXPERTS ADVICE FORUM()

  • Its really a great script! Thanks a lot! I like all your scripts veey much ๐Ÿ™‚

    Just a little comment that I found that once the sliding menu collapse, it will not return back to 0px height. Therefore it’s very obvious when I integrate it with your dialog box javascript (sliding menu still can be accessed though dialog box appear since there is still a gap remain after it collapse)

    and I have noticed for this line of code

    if((currh < 2 && d != 1) || (currh > (c.maxh – 2) && d == 1)){

    (currh < 2 && d != 1) will never reach, since currh will always greater than 2

    So I have changed it to

    if((currh < 5 && d != 1) || (currh > (c.maxh – 2) && d == 1)){
    if(d != 1) = ‘0px’;

    and it works.

    It’s just my little comment, I’m looking forward for your new fantastic scripts. Keep up the good work ๐Ÿ™‚

  • Aryan

    I am also having flashing problem while overlapping flash animation in Firefox 3. I have removed opacity from navigation, still having problem.

    What to do now?

  • Roy

    I have a problem on IE6, the select tag ALWAYS appear upside the dropdown menu. Is there a way to solve it?

  • Ah Woon Chan

    Hi there! I’m having the same problem as Brian…

    “There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure”

    Did you find a solution for it? Also I’m having a problem with IE 6 it seems that the names of the navigation item goes to different lines if there is a space.
    For example when hover 2008 the contents will be like this:
    bowling event
    Though it should be:
    friday meeting
    bowling event


  • Ah Woon Chan

    oh and forgot to ask about the submenu possibility… is it ready? ๐Ÿ™‚

  • Bryce

    These are the best CSS/JS dropdowns out there! Great work!

  • Excellet… Works perfect in all the browsers.. Great script, thanks a lot

  • mike

    thx for the codes.
    1 question

    how to resize each drop menu size so all the boxes arent the same size? cuz the texts are not in the same length and i need to shrink down the box for shorter text.

  • Jonathan Daggar

    I’ve been looking around for a dropdown menu script for a client, and I am happily spoiled for choice– there are many around, and quite a few good ones. Even among those, this one stands out. It’s the best I’ve seen.


  • Giles

    Hi, thanks for this great script. One issue I have found is that for some reason the drop-down menus are displaced approx 40px to the right.
    I’ve used the css pretty much as is, except for changing colour values and sizes so as to fit more menus on the page.
    I have worked around the issue by absolutely positioning all the dd elements, but I suspect there is something more simple I am missing.
    Any ideas?

  • Leka

    Hi Michael, Thank you very much for this script! It is an awesome script. I was wondering what I would need to do to get the dt item to stay same color as the submenu while I’m viewing it’s submenu. I plan to have the dt item 70px and the menu 150px. My files are exactly the same so there was no need to post scenario since I have not made any modifications to your code yet. Can you please help me with this one.
    Thank you.


  • Jason

    I am not sure if someone has stated this already … but in FF3 for Mac, I am getting a rendering error. For the top level menu elements, there is a 1 pixel offset at the bottom of the menu item. Other than that, it is a great looking nav.

  • im from Indonesia, thanks bro, may I link this

  • Can I put this javascript into joomla CMS?

  • Pingback: Sliding JavaScript Dropdown Menu « notizblogg()

  • Linda

    hello – is there a way to make the top navigation element a hot link?

  • I found one workaround for Ben’s issue(Flash disappear under the menu with Firefox 2 on Mac).

    Commented out “opacity” from CSS(1 line) and javascript(1line).
    Then, Flash doesn’t disappear with FireFox2 on Mac.

    Michael, How does this negatively affect your script?

  • Dave

    I put this script on my page, but it FF it makes my site left justified instead of centered. how do I fix this?


  • Kurt

    I downloaded this and got the files dropdown.js, dropdown.html, dropdown.css, and images. I copied the above script into my notepad html document. Where do I have to put those files in order to get this to work. It says that in order to unpack the file I need a password. What am I doing wrong. (really want to get this to work)

  • Joey

    Is the multi-level drop down menu available.
    If it, where can I get it, or how do I create it.


  • IDC

    Has anyone tried to set this up so the position is centered.
    I just can’t seem to get it. I must be missing something.

  • agassiz

    Hi there I really like this drop down menu but I have one problem. I would like to make one of the menus with no drop downs and just make it a link
    I have tried changing the code like so, but it just screws up the appearance.
    Any help would be appreciated.

    <dl class=”dropdown”>
    <dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”><a href=””>Home</a></dt>
    <dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>

  • sassygirl

    agassiz, I am having the exact same problem. I hope you get an answer soon as I am anxiously attempting to fix this as well.

  • sassygirl

    OK! I got my menu fixed and working perfectly. However, now my menu isn’t centered on the page. I am not CSS and HTML literate, so speak slowly:) I researched and the only solution I found was to remove display block from my styles, but that’s how I finally got the top items to appear properly with a link. Help?

  • Toth

    This is great, thank you. Is there any sort of license attached to this?

  • Sean

    Hey there Michael.

    I need to have this dropdown menu with a different background image in each main link. How could I do this?



  • Nobunaga

    Love this script and all of the goodies accompanying it.
    Works pretty good, no conflicts in most modern browsers, but I was having issues with IE6 letting my 100+ entry list scroll off of the page. When you mouseout the menu collapses, so if you have a wheel mouse no problems but with no wheel mouse you couldn’t get to the bottom of the list. I fixed that by adding to my ul css rules a height of 400px and overflow: scroll. That allows for the list to stay on the page and scroll bar to appear. Previously the scroll bar would expand the length of the list and then disappear.
    I am not very good with javascripts, yet, so I couldn’t figure out how to add a list of ids to the script. Because I have 3 lists (dropdowns) to implement, on one page, I decided to copy the script three times, rename them, and change the ids listed within. Is that a proper solution or there a method to add the ids to the original script and still avoid scripting conflicts?


  • Nobunaga

    Okay, I was wrong, it’s not working. I tried changing the ids when copying the script, then added link refs to my header region to each script. Now the menus don’t expand at all. I am doing something wrong. Probably an easy fix but you know the story, I’m a noob.

  • Nobunaga

    Figured out what I was doing worng, via trial and error. In order for these menus to be displayed on the same page I did not have to recreate the script. I had to change the name of the id assigned to the dt and dd elements. for instance what read “<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”>Georgia</dt>
    <dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>” on the first menu I changed to “<dt id=”two-ddheader” onmouseover=”ddMenu(‘two’,1)” onmouseout=”ddMenu(‘two’,-1)”>Georgia</dt>
    <dd id=”two-ddcontent” onmouseover=”cancelHide(‘two’)” onmouseout=”ddMenu(‘two’,-1)”>” and it works great!!!!
    I guess logic wins out on this one, but I am sure if I knew javascripting that would have been elementary (no pun intended).


  • Michael, I can’t thank you enough for your help with this code. I have implemented the multi-column dropdown version in our website:

    thanks again!

  • Sara

    anyone else having problems in IE6?

    Even at the site:
    the first submenu didn’t show up..see the picture below

  • Tensh

    If you’re searching for ideas as for scripting, I’d really like to have a small and easy ajax tab script. The tabs would be able to load already existing content, or load external web pages…

    Would you like to write a script like this? Pretty please! ๐Ÿ™‚

  • Pingback: Javascript dropdown "sliding" menu wanted - any recommendations?()

  • I will be releasing an updated dropdown script this weekend 11/23/08 that fixes any open issues, includes an example for a link-only heading and supports multiple levels. Comments will now be closed for this post.