Make a Mega Drop-Down Menu with jQuery

This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about jQuery, you may find this recent article on the jQuery plugin registry of great interest.

Mega drop-down menus are cropping up everywhere, and now that usability guru, Jakob Nielsen thinks they’re quite good, you can expect to see even more of these very soon.

Here’s what he had to say about this trend:

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Of course, Nielsen’s article includes some solid advice on the most usable way to implement these. Here’s what he recommends, in a nutshell:

  • The best mega drop-down menus contain simple, logical groups of information — so they’re easy to scan and navigate.
  • Keep them simple — avoid using complex GUI items or other fiddly interactive elements.
  • A mega drop-down menu should only appear after the user has been hovering for 0.5 seconds. If the menus are set to appear instantly, and a user is casually rolling their mouse over the menu, they’ll see a bunch of menus flickering about — and that’s a nuisance.
  • If the user mouses away from the menu item or the mega drop-down, the drop-down should remain for 0.5 seconds — just in case the user accidentally rolled their mouse out of the box.

So how would we go about implementing these? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

The Design

Let’s imagine we have a client, Mega Shop. Their designer has sent us a mockup that includes some mega drop-down menus. You can see the relevant part of that mockup below (view a full sized version here).

A mockup of the intended design, showing a mega dropdown

The Markup

First: the markup. I started out with a fairly simple menu based on an unordered list. The markup looks like this:

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Stuff for him</a></li>
  <li><a href="#">Stuff for her</a></li>
  <li><a href="#">Stuff for kids</a></li>
  <li><a href="#">Stuff for pets</a></li>
</ul>

I’ll add a div after each of the drop-down links — these will contain the contents of the menu. Also, I’d like to have a way to indicate that there’s a drop-down choice on those items, so I’ll also add a class, .mega, to those list items. Finally, I want to make sure that this menu makes sense when viewed without styles, and since each category will act as a kind of heading, I’ll add some heading markup to the items. Here’s a single list item:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
      <!-- Contents here -->
  </div>
</li>

Next, let’s add some content to those divs. Here’s one:

<li class="mega">
  <h2>
    <a href="#">Stuff for him</a>
  </h2>
  <div>
      <h3>
        Menswear
      </h3>
      <p>
        <a href="#">Shirts</a>, 
        <a href="#">T-shirts</a>, 
        <a href="#">Accessories</a>,
        <a href="#">More...</a>
      </p>
      <h3>
        Gifts
      </h3>
      <p>
        <a href="#">Sporting goods</a>, 
        <a href="#">Gadgets</a>, 
        <a href="#">More...</a>
      </p>
      <h3>
        Clearance!
      </h3>
      <p>
        40% off all photo accessories 
        this weekend only. 
        <a href="#">Don't miss out!</a>
      </p>
    <a href="#" class="more">
      More stuff for him...</a>
  </div>
</li>

Of course, I’ll need to add the markup to represent the site’s heading. Unfortunately, we’re out of time to discuss that in detail, but you can see what I’ve done in our first example, unstyled.html.

Style

Next, I’ll lay on some style. For now, we’ll just concentrate on the most pertinent parts of styling the list elements and the drop-downs. However, if you’re curious to see the entire stylesheet, you can view it in full in our second example, styles.css.

Each mega list item is set to display inline to achieve that nice horizontal bar. We’d like the drop-down menus to overlay the page, immediately under the list item; to achieve this we’ll use position: relative on each mega list item, and later we’ll use position: absolute on the divs:

ul#menu li {
  display: inline;
  position: relative;
}

Each div is styled up to resemble the mockup we received from the designer. I’ve used position: absolute here to align them flush left with each list item, and place them just underneath. I’ve also used display: none as a catch-all for all divs that are descendants of that menu, which will help to hide the one that’s sitting underneath the homepage link:

ul#menu div {
  display: none;
}

ul#menu li.mega div {
  width: 18em;
  position: absolute;
  top: 1.6em;
  left: 0em;
}

I’ll add another class for those list items, .hovering, and make its child div elements visible with display: block. Later, using JavaScript, I’ll add the .hovering class to the list item when the mouse hovers over it, and remove the class when the mouse leaves the area:

ul#menu li.hovering div {
  display: block;
}

Script

Now, let’s add the JavaScript. I’ve chosen to use jQuery for this example; of course, you’re welcome to write your own scripts or use a different framework. You might be thinking it’s a bit of overkill to use all the overhead of a huge library for one little menu. This is just one part of our hypothetical ecommerce site, however, and I’d almost certainly be planning to use jQuery for other parts of the interface as well.

First, of course, I’ll include the jQuery library. Next, I’ll also include a very nifty plugin called hoverIntent. jQuery has its own hover event, but it fires as soon as the mouse touches the target area. Instead, we want to implement the delayed effect Jakob Nielsen recommended: that is, we’d like to wait for the user to stop moving their mouse. The hoverIntent plugin provides for this by taking the mouse movement speed into account.

First, we’ll need to write a couple of functions to add and remove the .hovering class — that’s the class which switches on the display of the mega item:

function addMega(){
  $(this).addClass("hovering");
  }

function removeMega(){
  $(this).removeClass("hovering");
  }

And then, we’ll use the hoverIntent function to fire off those functions when we hover over an item or leave it. First, we need to set some configuration variables:

var megaConfig = {    
     interval: 500,
     sensitivity: 4,

The interval parameter specifies a number of milliseconds (that is, thousandths of seconds) which hoverIntent uses to check on the mouse’s movement. The sensitivity parameter specifies the number of pixels a mouse should have traveled during the interval parameter in order to be considered moving. If the mouse has moved less than that, the mouse is considered to be hovering.

     over: addMega,

The over parameter specifies a function that will be called when the mouse has stopped.

     timeout: 500,
     out: removeMega
     };

The timeout parameter specifies how long we’d like to wait in milliseconds before performing the mouse out function. The out parameter specifies what to do once that delay has passed — so in this example, the hideMega function will be called after 500 milliseconds.

Finally, we’ll attach the hoverIntent function to the .mega list items, telling it to start looking for hovers and mouseouts, using the configuration we set up:

$("li.mega").hoverIntent(megaConfig)

And that’s about it!

Testing Time

Time to test out our menu! You can see the completed demo with the markup, style, and script in our final example, completed.html.

What Now?

There’s a lot more that can be added here — for example, a drop-down menu can have some significant accessibility problems, so it’d be good to find a way to also add keyboard actions to this menu. It’d also be nice to add some more interesting design elements to these menus, like icons, shadows, or column arrangements. For now, though, we have quite a solid start!

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like jQuery Fundamentals.

Comments on this article are closed. Have a question about jQuery? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jon Edward Santillan

    your sample sub menu, looks like a google ads :)

    great tutorial btw..

  • jvvlimme2

    Excellent, I was looking for something like this since I read the article on mega menu’s yesterday. Thanks!

  • 5h4rk

    In your example you first defined the functions ‘addMega()’ and ‘removeMega()’ and then for ‘megaConfig’ you used ‘showMega()’ and ‘hideMega()’.

  • n0other

    Nice, you even made a mockup design, well done.

  • http://www.skifte.com Skifte

    Nice tutorial!

    In some cases you might want to show / hide the dropdown based on the speed of the cursor as well, and the $.event.special.hover plugin can be used for this. It’s similar to hoverIntent, only better. I quote:

    When the cursor enters an element, the average speed of the mouse is checked asynchronously over a fixed delay interval. If the speed is below the specified limit, the “hover” event is triggered. This plugin leverages the special event api.

    The plugin renames the the original .hover() to ._hover().

    Link to plugin homepage: http://blog.threedubmedia.com/2008/08/eventspecialhover.html

  • Dougal

    It doesn’t seem to work in Chrome.

  • http://www.patricksamphire.com/ PatrickSamphire

    Fantastic. I really like this. No idea if I’ll use it, but it’s a good implementation.

    My only complaint, and this is a complaint about what Nielsen suggests, is that 0.5s is a long time to wait for the menu. I think people might think that nothing is happening if they have to wait that long. I did.

  • Jason Grant

    Is it me or is there not too much delay on this menu? I would have preferred it a few milliseconds less than it is on currently. Maybe it’s my machine that slows it down by another few milliseconds.

    I would also say that the list of links within each mega ought to be an unordered list, rather than a list of paragraphs to enhance the semantics of the solution.

  • http://www.heyraena.com raena

    @5h4rk, thanks! I’ll update the post right away.

    @Dougal, I’m honestly not concerned with Chrome. It’s a very minor browser, and the menu items alone are clickable anyway — so as long as you’re using those dropdowns as an enhancement and not essential functionality, the Chrome thing doesn’t concern me.

    @skifte, thanks for the link! I’ll take a look :)

  • http://www.designext.eu nicoB

    Very nice, very helpfull.

  • Alicia

    It works for me in Chrome. And I agree that .5 s is too long to wait for a menu to open up. A delay is nice to stop the flickering in movement across the page but on open .5 is way too long. Even on close it was annoying to have to wait for it.

  • ak

    Am I missing something, but isn’t this the same as a tooltip (like Spry’s)? You can set a delay and fiddle with the vertical offsets. The content of the tooltip is just a div, so you can populate it and set it up any way you want.

    But again, am I missing something?

  • Sojan80

    Raena,
    The part that concerns me is:
    If you’re at the rightmost menu item and it has a mega menu attached, will that mega menu automatically flow from its location to the right, (outside the design and possibly forcing the user to scroll to the right) or will it switch directions automatically to move leftward inside the design area so the user doesn’t need to scroll to get to the items? Or, do you think you’d have to assign a special class to the last mega menu list item and apply CSS via that rule to make it move left?

    Are you planning on making the example files available as a zip file download?

  • sitehatchery

    Too much delay on the menus. I moused over the nav items and didn’t see anything, so I assumed it didn’t work (and was about to eject from the cockpit). Remembering you said there was a delay, I hovered longer and it worked. This is definitely a usability problem. I expected it to appear immediately. I don’t mind the .5 second lag afterward, but I need to see the sub items the instant I hover over it.

  • Graham

    Some might call me cynical, but I was kinda hoping that “the next big thing in web design” might be a new way to tackle CSS layouts or something equally groundbreaking. But instead its a, uh, menu. A big one. Um, is that it?

  • http://www.fbodyonline.com Rocket 442

    The dropdown is working for me in Chrome

  • Anonymous

    Great tutorial! But I have a question…

    In the other article, Craig points out that regular drop-downs are problematical because users without javascript may never be able to access those pages. I don’t see how using jQuery for mega drop-downs is eliminating that problem? Am I not understanding it correctly? What are some other ways to implement mega drop-downs without resorting to javascript and, therefore, would allow users to access all links in a menu? Thanks!

  • Amy

    Great tutorial! But I have a question…

    In the other article, Craig points out that regular drop-downs are problematical because users without javascript may never be able to access those pages. I don’t see how using jQuery for mega drop-downs is eliminating that problem? Am I not understanding it correctly? What are some other ways to implement mega drop-downs without resorting to javascript and, therefore, would allow users to access all links in a menu? Thanks!

  • http://www.brothercake.com/ brothercake

    Given that these menus are being pushed and hyped as better alternatives to standard dropdown menus, it really is disappointing that you’re giving us an example that has many of the issues which are levelled at dropdown menus as being reasons why they’re bad!

    No keyboard access. No dynamic repositioniong. Submenus which are inaccessible to screenreaders because you’re used display:none to hide them.

    The delay is also way way to slow – I thought they were click driven until I read the thread again and realised they were supposed to work onmouseover.

    I’m sorry to be so critical, but this is a badly implemented and inaccessible menu. You really shouldn’t have published it with such gaping accessibility holes.

  • glenngould

    The delay is also way way to slow

    I agree with you. A 0.5 sec interval is recommended by Jakob Nielsen actually, so I expect there is some research behind it, but I find it too slow either:

    Don’t make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that’s hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

    http://www.useit.com/alertbox/mega-dropdown-menus.html

    At least dropdown should be displayed instantly when clicked on the menu titles which is the default behaivour in almost all applications.

  • sorin21us

    Great tutorial!!! Thank you. I hope your work will be rewarded.

  • markrall

    @brothercake, first two paras says it all.

    While jQuery and related plugins allow inexperienced designers/developers to get up and running quickly, it shouldn’t be at the expense of basic usability and front end design principles. Think progressive enhancement / graceful degradation.

    Time to raise the bar.

  • Anonymous

    This seemed to work as designed for me in Chrome.

    The .5 second delay is a bit long, and as someone pointed out clicking on the top level link should open the sub-menu immediately (but it doesn’t). Also, moving from one top level item to another should not have any delay.

  • http://www.brothercake.com/ brothercake

    In my experience, 3-400ms is about the right time for a menu delay.

    But the problem here is that the delay is in fact more than 500ms – I timed it at 1 second. There’s some other latency in the script that’s slowing it down (maybe the inherent latency involed in programming with a library – when you run through multiple layers of abstraction over what is an interpreted language to begin with, you gotta expect a slower response)

  • http://www.brothercake.com/ brothercake

    Re: jakob’s description of timing. He’s wrong to say that the mouse should remain stationary. What it shoud do is remain *inside the target area* for that period. Whether it’s perfectly stationary within that area is irrelevant.

  • http://www.quizzpot.com hquinn

    great tutorial, thanks for sharing ;)

  • jez jones

    I agree with the above posts, new users will find this hard to use and will assume there is a problem – I would recommend that you go test this for yourself before you implement this.

    As glenngould said, I would also suggest that a user should still be able to ‘click to show’. If you look at the Windows GUI all menus are click to show – from the start menu to the toolbar menu. Nowhere does the user hover over a link and wait for it to show? This isn’t very accessible or user familiar.

  • Jack K

    Very nice tutorial, thanks for posting it! We’ve used “mega menus” for a few sites and they solved the ‘problem’ nicely. On a related note, readers might be interested in the jQuery listmenu plugin that we created:

    http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx

    It creates a top level alphabetical navigation menu from a plain old UL, LI or any set of html nodes. Has good options for specifying how many columns in the dropdown, was created with css-styling in mind, etc.

  • anon

    Maybe beside the main point, but since this is a tutorial it seems to me that the menu list markup could be a lot better. Why not proper nested lists instead of an odd assortment of unrelated headings, divs and paragraphs (to contain a stack of a hrefs)? Maybe it’s valid mark-up, but it’s not exemplary, it’s not elegant, and I don’t think links stacked inside the p are accessible. (Why use a p that way at all? The content isn’t a paragraph, it’s a sub list of links).

  • Anonymous

    Is there a reason the main menu items, don’t link on their own?
    I would think this is the most important part of accessibility considering without JavaScript there would be no menu period.

    Mike Plant

  • tiendan

    nice tutorial, thanks a lot

  • http://www.heyraena.com raena

    @brothercake, I’ve never been especially opposed to hiding things from screenreaders or keyboard users when they are non-essential eye-candy enhancements such as these. There are links on each category which in a real world example would hopefully lead to landing pages for each of those anyway–it’s still possible to get there.

    If a developer were to rely on drop-down menus as their sole mode of navigation then that’s definitely not OK, but in this instance I honestly don’t have a problem with screenreader or keyboard users getting a plain old menu.

    I get what you mean about the latency; I personally don’t like that either, but since I planned to base the example on the decisions Jakob Nielsen had talked about in his article, that’s how it turned out. I certainly didn’t observe a very large latency, though.

  • roni

    I guess that the delay is 0.5s after cursor stops moving and not 0.5s after cursor enters the “link zone” and I would believe that Nielsen’s conclusion is about the “link zone” not about cursors’ mobility.

    Delay between entering link zone and cursor stops ? 0.1s, 0.2s ? therefore drop-down display delay goes up to 0.6s, 0.7s and menu lacks of usuability.

    Side effect of the plug-in ?

  • http://www.clearwind.nl peach

    I find that delay very annoying. It slows down the process of orientating on the submenus drastically. For me the delay time should be cut down by half or something, in order for it to be a feature instead of a nuisance.

    I’m in love with the idea though, of mega dropdowns. will definitely use one in one of my current projects.

  • mattcass

    Great tutorial Raena! Good examples and I agree with your comments. I’m excited to give mega menus a try. I’ve had to bail on them in the past due to incompatibilities on pages that contained video controlled by jquery. And I’ll definitely be using less than 0.5 hover delay, that’s way too long imho.

  • dylan

    OK, I have a quick question. Can we have a hover delay on the main link as well? I would like to underline links like ‘Stuff for her’ or ‘Stuff for him’ at the same time the submenu appear. And I do agree, the delay is way too long.

    Also, once you mouse over drop down menu, the main link underline is gone, how do I make that stay on?

    What I want to do is instead of just underlining the main links, I want to change the background and I would like that background to stay there while my mouse go over pulldown menu…

  • Anonymous

    The delay was too long for me too, but it’s easy enough to reduce using this method. The purpose of the delay is to stop the menu disappearing when your mouse takes “a shortcut” over another item. If you have ever used multi-level menus you’ll know how annoying this can be.
    My guess is that the 0.5 second delay came from research into going from 2nd level to 3rd level navigation, where the mouse sometimes has a long way to travel. It may also be artificially long because of the longer time needed to understand a standard menu compared with a mega drop-down.
    Either way it’s easy enough to fix with this method, and sitepoint are just following the recommendations. We can hardly blame them for that.

  • http://www.brothercake.com/ brothercake

    @raena – yeah, that’s fair enough

  • http://www.dvdmsn.com brainch

    Fantastic. I really like this. is it work well with GOOGLE ?

  • brarob

    to be SEO friendly for the search engine robots can you use these mega drop downs? I was under the impression that JS and it’s brothers were all out if you wanted maximum indexing by the engines. Does anyone know?

  • http://www.hipstyleandvalue.com/ Jessica45

    Great tutorial! I am going to try it!

  • Opally

    Great article, I’m implementing this approach for our website redesign. One issue: I need to support IE6, and there is ghastly show-through for many types of elements. Setting z-index doesn’t seem to work. I’d like to hear some ideas about handling this issue. If Iframes, can you show me an example?

  • Opally

    In case anyone else is having this problem, I solved this through the suggestion for implementing z-index in this article by Anna Van Kesteren, and by using the bgiframe plugin for jquery. I hate IE6 the way I used to hate IE5 a few years ago before I could finally stop supporting it.

  • jeewan samant

    hi,
    i just want to know, how to hide the javascript file what webassist.com had done for their mega menu.

  • http://www.hipstyleandvalue.com/ Jessica45

    I re-created this mega drop-down menu on my website. It looks fantastic!
    Thank you, Raena for writing this article. And for providing the code.
    By the way, I don’t think mega menu would have any problems with Google and/or other search engines.
    The search engines read Tier-1, Tier-2, and Tier-3 layers easily. It is after Tier-3 search engines get confused – well, I don’t blame them, I would get confused too. ;)

    I am going to use this mega drop-down menue on my current project and I am going to test it with Web CEO – they usually pretty accurate.

    And besides, if the usability guru, Jakob Nielsen thinks mega menus are good, then… they are good!

    Thank again, Raena!

  • TinyMouse

    Excellant tutorial.
    I will be using mega drop-down menu on my companies intranet in a few days.

  • Problem Child

    Please don’t forget to use the DOCTYPE declaration for universal compatibility, artı for example:

  • SP-User09

    Thanks for the detailed explanation Raena, it is appreciated.

  • mfbullet

    nice article!

    I’ve been looking for something like this.

    Even tho there are several issues with this solution, it’s still an awesome introduction to how these mega drop-down menus are created.
    I think people should keep this in mind.

  • Stefan Verstege

    This works great.. But it’s nicer to change to code to this, so that the menu item keeps selected:


    function addMega(){
    $(this).addClass("hovering");
    $($(this).find("h2 a")).addClass("hover");
    }

    function removeMega(){
    $(this).removeClass("hovering");
    $($(this).find("h2 a")).removeClass("hover");
    }

  • Kamuran

    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 artı quite large. I don’t know, it might be worth experimenting with.

  • brianfidler

    I found that changing the sensitivity to 10 and the interval and timeout to 100 works well.

    “The sensitivity parameter specifies the number of pixels a mouse should have traveled during the interval parameter”

    I think a sensitivity of 4 is way to sensitive so I opened it up to 10.

    Stefan Verstege: Thanks for that bit of code! I was looking for a way to animate my mega menu and adapted your bit of code to get it to work


    function addMega(){
    $($(this).find("h2")).addClass("hover");
    $($(this).find("div.mega-choices")).slideDown("fast");
    $(this).addClass("hovering");
    }

    function removeMega(){
    $($(this).find("h2")).removeClass("hover");
    $($(this).find("div.mega-choices")).slideUp("fast");
    $(this).removeClass("hovering");
    }

  • Opally

    Mega-thanks to Stefan Verstege and brianfidler! Now I’ve got animated menus with selectors that stay hovered while the div displays… MANY-mega-thanks. I’ll share a link when my site is published (probably June.)

  • dzinr38

    I am not very saavy when it comes to javascript but want to implement this menu with the animation. I’m not quite sure what to put in my html page in order to get Stefan’s code to work. Can someone assist me? I’ve tried several things that did not work. I have the Sitepoint files, which are great, and all I want is to have the menu animate down and animate up gracefully. :)

    Thanks!

  • Opally

    dzinr38:

    1) first get the basic menu working.

    2) Read about implementing jqueryui.

    2) add in the code offered above. Notice that Stefan is applying a class called “hover” to the h2 element (or the h2 a element.) Did you define that class in your stylesheet?

  • cla313

    Hi.
    Great tutorial!
    I’m using your example for a page. Implementation went well and all worked fine…
    …until I decided to use another jquery effect and implement a slide show with jquery.cicle.
    However, there seems to be a conflict between the menu and the slide show:
    The menu in my page comes just a little bit before the image of the slide show. When I try now to use the menu, the drop-down part overlapping the image displays under the image.
    What could be the problem?
    thanks in advance!

  • cla313

    I completely missed the comment about z-index above. I went to ann van kisteren’s page.

    I changed the css for the menu so that now it includes a z-index of 2000 for the list item:

    ul#menu li {
    display: inline;
    margin: 0.1em 1em;
    position: relative;
    z-index:2000;
    }

    Everything seems to work fine now… got the drop-down back over the image.
    Could this be the solution???

  • CeeVee

    @ Raena or anyone else.
    Could someone post an example (or possible CSS code?) of what needs to be done in order to make the rightmost menu item stay within the confines of the menu bar? In an example that I have created, more than half of the rightmost menu’s drop down menu hangs past the menu bar. I am stumped as to what to do. Thanks so much!

  • http://www.hipstyleandvalue.com/ Jessica45

    This is CSS code I used. It looks fine on my screen:
    body {
    font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Verdana”, sans-serif;
    font-size: 11px;
    background: #fff;
    color: #333;
    }

    h1, h2, h3, h4, h5, h6, p, ul, li {
    font-size: 1em;
    margin: 0;
    padding: 0;
    }

    div#banner {
    background: transparent url(mega.gif) top left no-repeat;
    padding-top: 12px;
    padding-bottom: 36px;
    }

    div#banner h1, div#menu h2 {
    margin: 0;
    padding: 0;
    }

    div#banner h1 a {
    display: block;
    width: 270px;
    height: 120px;
    }
    div#banner h1 a span, div#banner .skip {
    position: absolute;
    top: -10000px;
    left: -10000px;
    }

    ul#menu {
    background: #940;
    color: #fff;
    margin: 0;
    padding: 0.3em 0em;
    }

    ul#menu li {
    display: inline;
    margin: 0.1em 1em;
    position: relative;
    }

    ul#menu h2, ul#menu h3 {
    font-size: 100%;
    font-weight: normal;
    display: inline;
    }

    ul#menu li a {
    color: #fff;
    text-decoration: none;
    padding: 0 0.4em;
    }

    ul#menu li a:hover {
    text-decoration: underline;
    }

    ul#menu li.mega a {
    background: transparent url(arrow.gif) center right no-repeat;
    padding: 0 1.2em;
    }

    ul#menu li.mega a:hover {
    text-decoration: underline;
    }

    ul#menu div {
    display: none;
    }

    ul#menu li.mega div {
    border: 1px solid #dda;
    width: 18em;
    position: absolute;
    top: 1.6em;
    left: 0em;
    padding: 1.3em;
    background: #ffc;
    color: #930;
    }

    ul#menu li.hovering div {
    display: block;
    }

    ul#menu li.mega div a {
    color: #300;
    padding: 0;
    background-image: none;
    text-decoration: underline;
    }

    ul#menu li div a.more {
    color: #390;
    font-weight: bold;
    }

    ul#menu div h3 {
    color: #f70;
    font-weight: bold;
    font-size: 1.1em;
    }
    ul#menu div p {
    margin: 0 0 0.8em 0;
    padding: 0;
    }

  • CeeVee

    @Jessica45
    That CSS does not work, just tried it. If you limit the menu size to 960px (like I have for my site) and if you have 10 pull downs and a home link (like I have for my site), the right most pulldown shows to the right of the menu.

    Any other CSS wizards out there? :)

  • CeeVee

    BTW, an example of what I am referring to and what I am trying to rectify can be found here:

    http://asitv.com/jquery/menu6/

    Rollover the Uniforms or Weapons pull down and you’ll see how the content doesn’t quite fit. Thanks again in advance to anyone who can help.

  • http://www.hipstyleandvalue.com/ Jessica45

    CeeVee,
    It worked on my site, but used it only once in the navigation panel. I didn’t use it for every button.

  • Joe

    This menu immediately breaks and is unusable in IE if you zoom the text. The main links just stack up on top of each other. Unfortunately I didn’t find this out until I had spent several hours styling my sample menu.

    No way this can be used as is on a real web site.

  • aardvarked

    CeeVee:

    All you have to do is add some styling for the right attribute in your css, it’s just positioning. You will need a separate class or id for each one you want to move inwards and you will just have to play around with the right property until you get the correct position.

  • ChrisJ

    People: Don’t whinge about the menu ‘timing’ and other minor ‘issues’… Just adapt the code supplied to fit your requirment.
    Raena toom the time to give us a tutorial… Take the time to make it work for your ‘real world project’ and if you can’t be bothered to be creative and learn how to write/customise something for yourself then you should probably give up web design/development and go be a postman/mailman (or woman) instead… its the easy life you crave (and yes I have worked in mail delivery so don’t bother trying to say it’s hard)

    Thanks for the tutorial Raena… it was a good start point and INSPIRATION for my own learning. :)

  • JJ

    Two outstanding issues:

    IE6 – menu stacks up if you zoom so is unusable.
    ul margins: ul#menu has a white-space margin top and bottom that I can’t get rid of so can’t integrate it into a design.
    Setting ul#menu to margin:0 causes first top level link in the menu to ride up to top right of the box.

    How do you fix the menu width and remove top and bottom margins?

  • http://pro-thoughts.blogspot.com/ vkelman

    I only know that Office 2007 menu is awful. It’s a major step back from a standard and simple Office 2003 menu. Really hard to find what you need, you never sure which main menu bar link to click. My daughter told me to uninstall Office 2007 from her machine because she cannot find anything. If “mega” menu is something like that, I strongly disagree with usability guru Jakob Nielsen. The less pictures and other unnecessary graphical elements are in a menu – the better it is.

  • drale

    Sojan80,

    I put an ID on the last two items that go off the screen and gave them negative left positioning. However I can’t get the right side of the drop down to be lined up with the right side of the menu item in both IE and FF. I line it up in one browser, its off by a few pixels in the other.

  • jj

    I can only assume that the example design given was dictated by not being able to remove top margins from the UL.

    I like the menu but it does mean it cannot be slotted nicely into any other design without allowing for the 20px top margin.

  • Samuel

    Anyone know how to set the width for each element? I want to add a bg image to each link but it gets cut off by the lenght of the text i have in each .