Drop-Down Menus, Horizontal Style

by Nick Rigby

296 Reader Comments

Back to the Article
  1. I does not work with this code made by youre article:

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

    <html>
    <head>
    [removed]
    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”, “”);
    }
      }
      }
    }
    }
    window.
    [removed]
    <style type=“text/css”>

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px dotted #000000;
    }


    ul li {
      position: relative;
    }

    li ul {
      position: absolute;
      left: 149px;
      top: 0;
      display: none;
    } ul li a {
      display: block;
      text-decoration: none;
      color: #000000;
      background: #00ccff;
      padding: 5px;
      border: 1px dotted #000000;
      border-bottom: 0;
    }

    /* Fix IE. Hide from IE Mac \*/
    • html ul li { float: left; }
    • html ul li a { height: 1%; }
      /* End */

    li:hover ul, li.hover ul {
    display: block; }


    <ul id=“nav”>

    </style>


     


    </head>

    <body>

      <ul>
      <li>Home</li>
      <li>About
        <ul>
          <li>History</li>
          <li>Team</li>
          <li>Offices</li>
        </ul>
      </li>
      <li>Services
        <ul>
          <li>Web Design</li>
          <li>[url=”#”]Internet
            Marketing[/url]</li>
          <li>Hosting</li>
          <li>Domain Names</li>
          <li>Broadband</li>
        </ul>
      </li>
      <li>Contact Us
        <ul>
          <li>United Kingdom</li>
          <li>France</li>
          <li>USA</li>
          <li>Australia</li>
        </ul>
      </li>
      </ul>


    </body>
    </html>

    What am i doin wrong?

    Greetz

    Rivers

     

    Copy & paste the code below to embed this comment.
  2. I think this article was great and found it to be very much a good starting point. However, I also have accessibility concerns when using any of the vertical or horizontal menus that allow drop downs, or roll outs. What use are the sub links if I cannot get to them as a blind user or mobility impaired user?

    For example, try it yourself. Since I am blind (for example only, I am sighted) I only use a keyboard. A mouse would take forever to find a link I needed, so I must use TAB, and the Arrow keys. Using tab I can get to the main menu items, but I cannot get to any of the sub list items. I even tried the tabindex attribute, no such luck. So I was thinking about trying the accesskey, well that still doesn’t work.

    So, if you are going to use a menu like this and are providing information that a customer, vendor, or employee will need in order to use that information for their job, to place an order, or to find deeper information, you are eliminating a large chunk of web users. I am not specific to just blind users either. I am taking about those users that must use other forms of navigation other than “see, point, and click.”

    Copy & paste the code below to embed this comment.
  3. Hey Nick,love your menu but have am having a problem. I am also using ul on the page. The script seems to be overriding everything that i try. I tried using #nav infront of the link, and even putting an inline style, but the only thing that I can make work is using and ol and overriding the list type. Has anyone else run across this problem? I would appreciate any advise. Thanks.

    Copy & paste the code below to embed this comment.
  4. I had major problems until I removed all references to “padding” from my css classes and ids (other than those relating to the nav ul). Instead I am using html “cellpadding=xx” for table tags. Don’t like to do that but oh well.

    The only problem I still have with IE Mac is that after you follow a link from the menu, if you use the browser “back” button, the menu that popped up is still there and won’t go away.

    —margrit

    Copy & paste the code below to embed this comment.
  5. Congrats ! beautifull work here…

    id read carefully the article again and again, i´d saved the example page locally and… doesnt work i download the js, i had validated the path, but still doesnt work im a noob about css but im inproving it reading a lot but i like soo much that menu ! if some boy can explain why i appreciate it so much !

    Copy & paste the code below to embed this comment.
  6. I’m trying to use this menu but when I download the example and open it locally on my machine in Netscape, Opera, Firefox and it doesn’t work. It’s wierd because the example menu works on the web in those browsers. If anyone can give me a reason why this is I would really appreciate it.

    Copy & paste the code below to embed this comment.
  7. Hi I was studying this article, and made some good things with it… but now I’m needing to do an 3 level menu, and using your css and just adding a new level, the menu crashs and does’nt work well.

    You could see some example of what I’m doing here: http://www.aventuradiet.com.br/apocalypse/index.php

    If you could, please help me!!

    my email is: r’dot’apocalypse’at’gmail’dot’com

    thank’s

    Copy & paste the code below to embed this comment.
  8. I really like this menu and I have been playing with it for some time now.  One thing I don’t know how to do and I can’t seem to figure out is when you mouse out I don’t want the menu to disappear until you mouse over another link.  Is that possible?  If so how would one change the JS code to do this?

    Copy & paste the code below to embed this comment.
  9. I was looking how to make “safe” horizontal lists for a long time. This is a great way to do this! I am impressed.

    Copy & paste the code below to embed this comment.
  10. Does anyone have any idea how to make the first set of buttons have different colour backgrounds (eg. First button is blue, next red etc.)? 

    I have been trying for quite some time and I can’t get it to work.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. <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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. “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.