Drop-Down Menus, Horizontal Style

by Nick Rigby

296 Reader Comments

Back to the Article
  1. On your page,
    “Mystery IE6 Bug:

    During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.”

    Putting in the background makes the menu elements disappear with Linux Galeon.  Removing the background (background: #fff;) makes the problem disappear.  I know that IE is more popular, but I’m still going to try to figure out how to make it work for both.  Wish me luck.

    —-ljl

    Copy & paste the code below to embed this comment.
  2. I discovered the solution to my own problem (the problem is: in IE5 for the Mac, if you follow a link and then use the browser back button to go back to the menu, the submenu that popped up before is still there and won’t go away): added the following to the [removed]

    node.onclick=function()
    {
      this.className=this.className.replace(” over”, “”);
    }

    so that the whole script is:

    startList = function()
    {
    if (document.all&&document;.getElementById)
    {
    navRoot = document.getElementById(“nav”);
    for (i=0; i<navRoot.childNodes.length; i++)
    {
    node = navRoot.childNodes;
    if (node.nodeName==“LI”)
    {
    node.
    {
    this.className+=” over”;
    }
    node.
    { this.className=this.className.replace(” over”, “”);
    }
    node.
    {
    this.className=this.className.replace(” over”, “”);
    }
    }
    }
    }
    }
    window.

    —Margrit

    Copy & paste the code below to embed this comment.
  3. How about sub menus that always display at the top, instead of just to the right of your current mouseover?

    Copy & paste the code below to embed this comment.
  4. I have been looking for a solution for menu’s to display over an iframe.

    I have experienced problems with javascript menus, and this css version, displaying under the iframe content.

    Does anyone have any clues as to how the iframe content can be set to display below the drop down menu?

    I must use iframes to clip other web content and can’t avoid using them.

    Any help appreciated

    Justin

     

    Copy & paste the code below to embed this comment.
  5. Talking about menus, i’d like to show you one of mine ideas. It’s not really drop-down, but maybe this is a good place to do this.

    At www.itgmarinoni.it you can see the top navigation bar in the header (two anchors). Those two links are “inside” the header’s image). For explanations look at the css (www.itgmarinoni.it/src/css/cwm.css).

    Have anyone of you ever done a menu like this?

    Copy & paste the code below to embed this comment.
  6. I’m a newbie and want to get this to work.  The sample link provided works fine for me in IE6.  But the one I created for myself only works in Firefox, etc…  In IE6, the menus pop out when I hover, but they don’t go away when I ‘dehover’

    Any help would be greatly appreciated.

    Copy & paste the code below to embed this comment.
  7. Does anyone have a workaround for the problem with <select> menus?  the vertical or horizontal dropdowns display behind select menus in both mozilla browsers and I.E. on windows platform.  It is not possible to simply either hide or turn off the visibility of each <select> element by assigning it an id—there are several on each page that are affected and there are thousands of pages in the site.

    Copy & paste the code below to embed this comment.
  8. I love this article. I recreated it and tried to add another level of sub menus, but I can’t make it work in IE. It works in Netscape without issue.

    I’ve tried variations of CSS where Behaviors are used, but Behaviors don’t work in IE/Mac.

    How can you make drop-down menus with multiple sublevels work?

    Copy & paste the code below to embed this comment.
  9. One less pleasant thing with CSS menus is that they disappear the moment you hover out of focus, and you’d have to start ‘menuing’ all over again.

    A way around this is to add some padding (top, right, bottom) to the ul’s, and compensate the top with a negative margin.

    Of course IE doesn’t play along here: it doesn’t grant the additional padding height. One way around this is to set a (1 pixel transparent) background image.

    I haven’t tested it thoroughly on all browsers, but it works on Op7, FF1, IE5/5.5/6,  Konqueror.

    Cheers,
    Marcel.

    Copy & paste the code below to embed this comment.
  10. <ul id=“nav”>
      <li>Home</li>
      <li>Test</li>
      <ul>
        <li>Regular</li>
        <li>Commissions</li>
        <li>Organisation</li>
      </ul>
      </li>
      <li>Test2
      <ul>
        <li>Option1</li>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
    </ul>
        <li>Option2</li>
      </ul>
      </li>
      <li>Contact Us
      <ul>
        <li>United Kingdom</li>
        <li>France</li>
        <li>USA</li>
        <li>Australia</li>
      </ul>
      </li>

    </ul>

    i have used this from the article and i’m wondering if it’s possible to make it work like it should. Now, if you go over Test2, it shows Option1 and Option2 but also link1,2,3,4. What i want to know is: Is it possible to make the menu more complicated, like..more options to choose from.

    thanks in advance and i hope my explanation on this was clear.

    Copy & paste the code below to embed this comment.
  11. IIRC horizontal goes this way:
    <—————><—————><—————>

    Vertical, which is what this menu is, goes this way:
    <—————>
    <—————>
    <—————>

    the worst part is, in clicking thru the first few pages of the discusion section to see if this issue had been raised ( why can I not request to see ALL of the discussion in a single page so I can use firefox’s find feature more quickly? ) It seemed as though everyone else had accepted this reversal of the meaning of horizontal and vertical.

    aCk!!

    Copy & paste the code below to embed this comment.
  12. Hi

    Despite all the chat about repetitions, this tutorial has been invaluable to me despite having read other articles about nested lists.  This was the cleanest solution I have found to date.  However, although I have managed to create it on my page so it works fine in IE (bizarrely enough without using the Holly Hack), my sub links don’t work on any other browser and they display oddly.  My test page is at: http://www.azuremarketing.com/cssAzure/index_test.htm and I have so far only added links from one section.

    I’m sorry if something has already been written about this in the discussion previously, but I’ve had a trawl through and can’t find any reference to it.

    I’ve been through my links and it may be that I’ve consused something through my use of an additional div.

    Any advise would be really appreciated.

    Many thanks

    Vicky

    Copy & paste the code below to embed this comment.
  13. I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.

    Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.

    Any ideas on how this would be fixed?

    Copy & paste the code below to embed this comment.
  14. I’ve been trying to get this code to show multiple menus as the menu I need is in a php loop and is shown multiple times with some changes done to it, the entries differ.

    Now the problem is that in IE and Opera only the first instance of the menu works and others only show the main ul and don’t “dropdown” but in firefox everything works perfectly.

    Any ideas on how this would be fixed?

    Copy & paste the code below to embed this comment.
  15. Is there a way to develop this in a similar manner, except this time horizontal rather than vertical…

    Im really new to CSS so i wont be able to do it myself :(

    Copy & paste the code below to embed this comment.
  16. “Is there a way to develop this in a similar manner, except this time horizontal rather than vertical…”

    There is a link in the article to the original menu that this one was derived from, which was horizontal:

    http://www.alistapart.com/articles/dropdowns/
    http://www.htmldog.com/articles/suckerfish/example/

    Copy & paste the code below to embed this comment.