Hybrid CSS Dropdowns

by Eric Shepherd

110 Reader Comments

Back to the Article
  1. And it is matter of judgement how many links are bearable and how many are just too much. What is the important bit of the web page? Its content or how many more are available in the whole site? Do we want to help the visitors to find what they came for or do we want to offer them everything at once?
    I never claimed web sites should be like books and we should only have links to the next, last page and the sitemap I just compared offering all links on a page to printing the index of a catalogue on each page. We offer too many options where they are possibly wanted but not needed.
    Nested navigations are an extra offer to avoid a page load and a drilldown in the navigation.
    It is for us to ponder if they are worth it when they can be a bother to use for some.
    The visitors benefiting from the shortcut are the high end users with our CSS available and able to see the showing and hiding and navigating via a mouse – if we use CSS only (with JavaScript you can create navigations that can be enabled by keyboard, too).
    The other visitors will see the whole navigation at once, which can be far too much information.
    The logical step would be to only offer the extra information to those who want it and not assume that everybody does benefit from it.

    Copy & paste the code below to embed this comment.
  2. Who are these “high end users, with CSS enabled” you speak of Chris?

    I don’t see how you can shrug off the typical visitor, with CSS on (of course) and Javascript enabled (I think less than 2% have Javascript turned off) as a high end user who isn’t worthy of sub-menu navigation.

    What you’re suggesting (adding sub-nav dynamically) seems to be putting far too much reliance on client-side scripting when your end result is something that 90% of the visiting population (or so) can take advantage of.

    Couldn’t I just as easily put a link right in the top of my document which when clicked will load my site, but without the sub-nav? Or (as I tried to explain earlier), just add another stylesheet that hides the sub-nav from all?

    I don’t know, seems like a draw I guess. We could probably argue the advantages/disadvantages of each method to no end.

    Copy & paste the code below to embed this comment.
  3. I had this kind of menu going for a long time at my company. I eventually changed it to be a traditional drop-down. While the hybrid here does give great clues to navigation, there are also a few major drawbacks that take away more than they add in my opinion.

    The worst problem is the mouse space. When you want to change a section, you mouse over it, move down, then move across to the item you want on a thin line, being careful not to go outside the line. If you lose the line, you have to go back and start all over. Traditional drop-downs don’t make you change direction while navigating, you just drop right down to your item. Plus there is lots more room horizontally with normal drop-downs than vertically with hybrids because you’re not trying to stay within just one line. This makes navigation MUCH easier and not so much an exercise in mouse accuracy.

    Next is that since it is horizontal, there is a limited quantity of submenu items that can be put on it without rolling over to the next line. Usually these kind of things are kept on one so you don’t get blank space from one carry-over and because it’s more difficult to tell that these are sub-items when they’re in a big jumble. So the one line limits you.

    Also with the one line, if your right-most tab only has one or two sub-items, you run into problems. You can’t position the list all the way to the left because it will look like the sub-items are part of some other tab or no tab at all. (unless you use a high-contrast tab structure like the example) You also can’t position the left-most sub-item with the left of the selected main item because it will quickly run off the right side of the page. And it becomes a bit tricky to align the main and sub-items to the right, plus it messes up the first item.

    Last is the obvious two-level limit in navigation. This limits both ways. If you want to have a menu item with no sub-items then you’ll have to have a blank line or it will jump down when you roll over another item. This looks weird to have a blank line because you wonder why it’s there. On the other hand, you can’t go more than two deep. Otherwise you’d have to either do traditional drop-downs afterward (weird) or continue the lines down and down (even weirder) or lay the lines across the whole page over top of the current page as you dig deeper and deeper. (which hides the page)

    As you can see, all these things eventually added up to the return of traditional drop-downs.

    Copy & paste the code below to embed this comment.
  4. The “typical visitor” who I called the “high end visitor” has JavaScript enabled and our CSS for display. These are the only ones that can use a dynamic navigation (JS is needed to ensure keyboard access as most browsers don’t support :focus), right?
    That is why my stance is to make it available to them but not force it on the others.

    Let’s check the facts.
    – All levels of navigation on each page are not a need, they are a shortcut – a “nice to have”.
    – Users without either JS or CSS or both will get a lot of links they don’t need.
    – We cannot rely on Javascript being available (it is not in high security areas like financial institutions for example), but we can test if it is available.
    – We cannot rely on CSS to get rid of the unnecessary links as visual hiding is not removing them from the document.

    Therefore the most usable and unobtrusive way is to:

    - Give the visitor the bare minimum of navigation and an option to have an “extended navigation” – an option that can be stored in a profile or a cookie for the next visit.

    Or if that is an unwanted step:

    - Give the visitor the bare minimum and expand it only when JavaScript is available.

    The latter option would mean no difference in the site experience, but is more flexible.

    It is the same logic we applied when we moved screen furniture from image elements to the CSS.

    Copy & paste the code below to embed this comment.
  5. i use a div like someone else wrote that will position my whole site. Now the navigation will work in Firefox but in IE6 it will not allow me time to select a subnav. The thing has to do with position:absolute but is there a way to fix this problem? i really need this… cause 12 hours of transparancy in IE hack and now this i cant handle this anymore:S

    well ill hear… maybe

    Copy & paste the code below to embed this comment.
  6. Before everyone praises this approach it should be clear that such menus imply more or less severe usability problems especially for elderly users or users with motor problems.

    Personally and apart from this, I liked some ideas presented in the article.

    Copy & paste the code below to embed this comment.
  7. Hybrid CSS Dropdowns…  loox really bad in Safaribrowser..  Pity…  GREAT STUFF though!

    Copy & paste the code below to embed this comment.
  8. >loox really bad in Safaribrowser..

    Loox really good in 3 versions of Safaribrowser ALA tested it in or ALA not have pubbblished it.

    Copy & paste the code below to embed this comment.
  9. This is an interesting read. I only wish it had been published earlier – a client of mine was after something similar with their site!

    Copy & paste the code below to embed this comment.
  10. Looks good in “standard/default” mode but when
    I ctrl+ in Firefox 1.0.2 to increase the font
    size, only the sec-nav change, the tabs don’t.
      :(  Same for ctrl to shrink the font.

    After 4 ctrl+ the sec-nav starts to wrap and
    the bottom half of the words are cropped.  :-(

    Copy & paste the code below to embed this comment.
  11. All I get is the image, without the menu.  It works in Navigator for the Mac….

    Copy & paste the code below to embed this comment.
  12. Why doesn’t anyone use the function getElementsByTagName()?

    It’s much more elegant than using a for loop to iterate through each of an element’s children to find all of one type of tag.

    Copy & paste the code below to embed this comment.
  13. Does anyone actually USE that browser any more? As in, anyone who matters?

    I’m a firm believer in discarding broken or out of date browsers from my support roster, since most users of Netscape 4.x and IE Mac will be pretty much used to dealing with pages that break on their browsers anyway.

    Copy & paste the code below to embed this comment.
  14. I was looking for a way to make pulldown menus without browser detection, because clean xhtml/css was supposed to get rid of browser detection scripts. Of course IE not supporting the hover function for anything besides ‘A’ makes this hard, but I keep hoping for a different solution.

    Copy & paste the code below to embed this comment.
  15. when i view the menu in the opera, the last menu item jiggles ‘n wiggels!?

    Copy & paste the code below to embed this comment.
  16. I tried to view this on IE 5.1 for Mac and it doesn’t work. Should it work?

    Copy & paste the code below to embed this comment.
  17. I did one, but i guess that this version showed have a little trick

    check this one…

    i built using some advices from a list apart.

    Copy & paste the code below to embed this comment.
  18. Check this out…

    http://www.meucarronovo.com.br

    Copy & paste the code below to embed this comment.
  19. I’ve noticed the IE6 offset issue as well.  I made a menu and once I check it with IE6, I had the same problem as the example at the end of this tutorial.  Is there a fix for this IE6 bug?  It’s kind of frustrating spending the time to follow a tutorial and then realizing that it won’t work in IE…

    Copy & paste the code below to embed this comment.
  20. Just an FYI

    using Safari 1.0.3(v85.8.1) [via 10.2.8, Old School I know…] having a couple issues:

    • am seeing each main menu name, below the related submenu items, indented, half line below (obscurring submenu text).
    • Under the Modern tab (orange), the hover of submenu items displays the main menu background (blue bg with clipped-corner) in the submenu, and changes the text color to orange (instead of blue).
    • Rolling between main tabs is inconsistent.  Sometimes it works, sometimes it doesn’t.

    Something strange is afoot at the Circle-K

    Copy & paste the code below to embed this comment.
  21. another FYI

    On my system, the submenu at arkitrave.com does not work totally either.

    Submenu is always stacked on left edge below Home tab.  And not clickable, as it disappears when I come off the tabs.

    Not a CSS-guru by any means—just here to learn.  I don’t think my Safari config is altered beyond stock.

    But maybe it is just my system…

    Copy & paste the code below to embed this comment.
  22. I built the site well over a year ago, and the dropdowns have nothing to do with this article. They work like a charm in everything except Safari, and I’ve never figured out whether it’s my bad coding or Safari that causes them to break in Safari. I am aware of the problem. Know that it is a different set of code, as the current article works fine in the Safari that I tested in. I’m not sure what the problem is for the older version in 10.2.8.

    Maybe I will go back to JavaScript rollovers :)

    No, seriously, thanks for all the observations from different versions; it is impossible to test for all of these browsers and OSs. I do pretty well with my local PC/Mac Intranet and 9 or so browsers, but it’s all under Win2K or OS10.3.

    I have on my list to fix the indentation problem in IE6 – I don’t yet know what’s causing that and I’ll post something to my site when I figure it out. That said, don’t hold your collective breath, as I’ve got a busy spring coming up.

    Copy & paste the code below to embed this comment.
  23. Excelente artículo … justo lo que buscaba

    Copy & paste the code below to embed this comment.
  24. Hi Eric—Sorry to divert focus to your site… given it’s different code and older. (should have read every response prior to mentioning it)

    Thanks for an outstanding article!!  Was not trying to be a pain-in-the-rear… only trying to explain the issue with 10.2.8 specifically.

    popartpopeye mentioned on page 7 (in not a very helpful way) that his Safari wasn’t working properly.  If he was having the same issues as I—thought you could use some more info about specifics.

    Keep up the great work though!

    Copy & paste the code below to embed this comment.
  25. I’ve implemented the menu on an elastic site with two main problems. 1) (I think everyone has already discovered) My main-level links wrap, but they are then hidden by the “on” sub-nav that is positioned directly below line 1 of the main-nav. Any way around this? (he asks, expecting silence).

    And 2). Because the site is elastic, the sub-nav width needs to be set to 100%. But in IE, when the width is set to 100%, the sub-nav li’s all appear one vertically on top of the other. The only way to render them horizontally is to specify the width of the ul in either em’s or px’s. Anyone know of a way around this?

    NOTE: The implementation is located at the linked site (which is hosted on my computer and may or may not be online). The site is essentially a personal experiment in xml from start to finish. Pay no mind to the content. ;-)

    Copy & paste the code below to embed this comment.
  26. Looking at the final menus in Firefox and IE6 side-by-side reveals that they don’t quite display the same. For example, in Firefox, the header image and menus are flush left. However, in Opera and IE6, this is on a Linux system, the menus start with a space between the left side of the browser window and the edge of the menu instead of flush with the leftside browser window as is the case with Firefox. Is there a way to compensate for this behavior without trashing the display in Firefox? The more I learn about web development the more I loathe Microsoft and IE.

    Copy & paste the code below to embed this comment.
  27. Someone know a menu like this?
    Option1   |  Option2   |  Option3
              option2.1
              option2.2
              option2.3—>option2.3.1
              option2.4 >option2.3.2


    The current no have option2.3.1

    Copy & paste the code below to embed this comment.
  28. In my opinion, CSS has not yet reached a stage where it can gracefully handle complex behavior like nested drop-down menus.

    This is most evident in the example if you hover over the right-most parent (“Digital”) and then quickly move to the left-most child (“Xenakis”).  If you can do this quickly without losing the “Digital” menu items, then you’re more dextrous than the vast majority of mouse-users.

    The CSS :hover pseudo-class simply has no tolerance on most browsers for any accidental mouse jittering.  It would be nice if it could be specified with a given timeout, for example “ul:hover(5)”, but alas, that is not available – and perhaps it shouldn’t be.  The purpose of this pseudo-class is to simply highlight an item when it is clickable, not to provide complicated behavioral scripting capabilities.  CSS is a brilliant language for style, but every “CSS Behavior” hack that I see just seems to be a stretch for no purpose other than showing off what is possible.

    (Granted, that’s a fine purpose and something that should be done in the name of innovation, but it’s not a good methodology for creating accessible and profitable websites!)

    A javascript solution, otoh, can easily be created that will use exactly the same degradible XHTML and similar CSS styling.  In this way, you can allow your users to hover or click a parent, and don’t change it until they hover/click another parent.  This is the default application behavior that most users are used to, and it is more forgiving of often imperfect mouse movements.

    Copy & paste the code below to embed this comment.
  29. Doesn’t degrade either. All you see is the top photo.

    Copy & paste the code below to embed this comment.
  30. who knows.
    It seems I am having problems not with flash
    but with multiple lines of drop downs.

    ————————————————
    drop down1 drop down2 drop down 3
    ————————————————
    ————————————————
    drop down4 drop down5 drop down 6
    ————————————————

    the list hides behind the <ul> heading below it. is this just a z-index or how the flop am
    I supposed to get it to work.  any ideas??

    Copy & paste the code below to embed this comment.
  31. v1…

    Copy & paste the code below to embed this comment.
  32. its based on pixles, but even worse it cannot be zoomed. Thats just crap, nothing else.

    Dropdownmenus in general are a problem, better use asyncronic server connections (ajax) and refresh menus statically, if you mess around with javascript anyway.

    Copy & paste the code below to embed this comment.
  33. Sorry, but this menu isn’t working on IE 5.2 Mac. It is working in Safari.

    Copy & paste the code below to embed this comment.
  34. What if your menu is centered on a page?  How the heck are you supposed to position the sub-navs since this example is crippled by using actual pixels?

    Copy & paste the code below to embed this comment.
  35. “This technique is a bulletproof way to ensure browser compatibility and to maintain usability”.
    I believe the above sentance should be removed from the article; because IMHO this solution has serious issues:
    – poor browser support,
    – text is not scalable,
    – list items are not accessible in IE when JS is disabled,
    – and, AFAIK, tabbing navigation is not possible in any browser.

    Months ago, I have published a solution, trying to address each problem:
    http://www.tjkdesign.com/articles/dropdown/demo.asp

    Copy & paste the code below to embed this comment.
  36. I belive my own take on a pure css menu have better usability than this one. No javascript, just css (except for the virtual pagechange, just for the demo) Take a look at:

    http://derkert.com/ip3/menu/

    Copy & paste the code below to embed this comment.
  37. As a student I apreciate very much. Send more, please.

    Copy & paste the code below to embed this comment.
  38. I tried this and it works very well except the subnavi which disappers immediately when I move the cursor away from a tab. So I can’t access the subnavi at all! Do you have a solution for this? Thanks!

    Copy & paste the code below to embed this comment.
  39. I’m still searching for a CSS solution that is compatible accross all (most) OS platforms and browsers. I liked the look of your menu, but when I tried it on OS-X and IE, I get no menus at all!

    Mac OS 10.3.9 (Apple’s most current), and Internet Explorer for Rel. 5.2.3 (MS’s most current and final version)

    Anyone else have this problem?

    Copy & paste the code below to embed this comment.
  40. The example at http://www.alistapart.com/d/hybrid/hybrid-4.html doesn’t look good after I increased text size in Firefox (Ctrl++) several times.

    Copy & paste the code below to embed this comment.
  41. Your menu behaves badly in Firefox when I increase text size (Ctrl++). Menu items disappear, extraneous lines appear, etc..

    Copy & paste the code below to embed this comment.
  42. Hi Roman,
    Re: my menu (http://www.tjkdesign.com/articles/dropdown/demo.asp)
    AFAIK, it is possible to use “Ctrl+” three times in FireFox without breaking the layout; this corresponds to more than the “largest” text-size in MSIE.
    In any case, I believe it is much better than what the “Hybrid CSS Dropdowns” menu allows ;-)

    Copy & paste the code below to embed this comment.
  43. Probably one of the best css solutions I have seen yet.  I love ALA!

    Copy & paste the code below to embed this comment.
  44. The problem with CSS menus is that navigation is very important and problems with like the flashing effect, cross-browser issues, etc. make it less than ideal.

    Another problem I have with CSS only menus is that it tries to do behaviour in CSS for which CSS was not designed. CSS should IMO be presentation only.

    Also with XHTML markup, CSS styled but Javascript powered navigation you can do some eye candy like the menus I did for my MXR CMS product. see http://mxdemo.infireal.com/ (P.S: the markup is terrible, its on the todo list)
    The menu does a roll-up and fade out effect.

    Copy & paste the code below to embed this comment.
  45. I’m having a problem implementing a list in FireFox.  When I added the style info into my stylesheet, all of a sudden FireFox stopped recognizing all of the stylesheet from that point down.  I can’t figure out what’s causing this problem.  IE can still parse the entire stylesheet, displaying the list properly.  (The list is taken from the ALA 2002 article Taming Lists by the way.)

    Any suggestions?  Thanks!

    Copy & paste the code below to embed this comment.
  46. I was just checking out the linked examples and they look fine in Safari, but totally not working in Explorer??

    Copy & paste the code below to embed this comment.
  47. Sorry for a little off-topic, but I’m struggling with one thing, which maybe you know how to solve

    I want a very simple horizontal menu, based on list

    I’ve done it, but I wanted it to have a custom bullet, so I used list-style: url(/image.gif); in the ul style declaration

    it appeared ok in mozilla, but there is NO image neither in opera nor IE.

    well, if I change the image to just ‘circle’ or ‘square’ it does not appear in those browsers anyway

    Is it possible to to have bullets (custom too) in horizontal menu based on ul ?
    it’s easy to make it in vertical on, but I have not found any example of such menu turned to horizontal…

    thanks

    Copy & paste the code below to embed this comment.
  48. I am in the process of setting this up and I can’t get it to center on the page like the rest of my page does. I have a container div around my whole page with margin-left and margin-right set to auto, but the secondary nav is always left aligned. Anyone know a remedy?

    Copy & paste the code below to embed this comment.
  49. I like this example… :)  what is to say..

    Copy & paste the code below to embed this comment.
  50. I was working several mothes ago on a similar NAV on a client site http://www.cfatb.com/ using extensively the sluckerfish inspiration.

    I enhanced it to fit our requisites and it seems that it works good on many major browsers. Of course the CSS is free to use as well as the HTML code itself. I think I made some mistakes but it works pretty well.

    Copy & paste the code below to embed this comment.