296 Reader Comments

1. Saw something like this before on the dutch site “Naar Voren” (http://www.naarvoren.nl/artikel/hover.html). And that version works well in IE6… 🙂 Example: http://www.naarvoren.nl/artikel/hover_cssmenu.html

2. When this article first went live, a small JS file got lost in the shuffle. Because the file was not present, the demo did not work during the first minutes the article was online. Alerted to the production error, we located and uploaded the missing JS file, and all was well.

   One-sentence forum comments to the effect that the demo wasn’t working in Browser X, Y, or Z have been deleted. We are grateful to the first few readers whose lightning-quick posts alerted us to the problem.

3. Good article. It’s something I did a while ago on http://www.workingwith.me.uk/ from first principles – it would have been nice to have had this around then.

4. Has anyone managed to do this with a multiple nested list? Now that would be interesting 🙂

5. Would it be possible to change this?

6. The Suckerfish code is very useful but can be improved to accommodate multiple uses in multiple scenarios. See below for the modified function (line wraps marked by an underscore). Once the list has been written to the browser, simply call the function below with the appropriate parameters. Thanks for the article.

   ——-

   function fnSetHoverClass(parentID, tag,_ hoverClass) {
   var el = document.getElementById(parentID);
   if (el) {
   el = el.getElementsByTagName(tag);
   for (var i=0; i < el.length; i++) {
   el[i].onmouseover = function()_ {this.className += ” “+ hoverClass;}
   el[i].onmouseout = function()_ {this.className = this.className.replace_(new RegExp(” “+ hoverClass +”\b”), “”);}
   }
   }
   }

   ——-

7. A simple, yet useful example.

   This piece could be used more-or-less as-is or could easliy be expanded into something a little more visually appealing

8. A quick question: if a user has javascript disabled, but CSS enabled, does the menu work? If not, is the percentage of such users so small its not worh bothering over?

9. Why does this article exist? Isn’t this the EXACT same thing the Suckerfish article was about, except that the menu is styled horiZontally? do we really need another entire article just to figure this out?

   -sorry for being a bastard 🙂

10. Why not call the javascript from the css file using the IE only property, {behaviour:url…;}.

    This would mean non IE browsers that don’t need the Javascript will not have to download irrelevant scripts.

    Of course, your css won’t validate – but that’s another story.

11. Does not show the embedded ul. 🙁

12. The menu works with IE6 on my system (WinXPSP1-IE6 version see below)

    Nevertheless, the aforementioned example at http://www.naarvoren.nl seems superior IMHO.

    It uses .htc for IE adaption, which, I reckon, is the adequate and reliable solution for IE compatibility.

    Besides, the dutch menu (and others) allows for the creation of deep structures (sub sub menus etc.). I think that it’s a must (the dutch XHTML is valid and semantically OK too).

    …the ala menu does not do that properly – lest I extended it wrongly; apologies in advance, should that be the case: http://www.byteshift.de/msg/ala/horizdropdowns (hover over the “about” entry)

    I’m not too happy with the horizdropdowns menu; some perceive inferior quality with ala articles in the last years, that might be true.

    Generally, I do prefer less, but better, articles.

    My MSIE Version: 6.0.2800.1106.xpsp2.030422-1633

    Update Versions:; SP1; Q810847; Q813951; Q813489; Q330994; Q818529; Q822925; Q828750; Q824145; Q832894; Q837009; Q831167;

13. Timing was perfect, I was in the midst of frankensteining the suckerfish stuff when this popped.

14. I was not aware of this problem. Will look into it

15. Why not use the hover behavior from http://www.hszk.bme.hu/~hj130/css/list_menu/hover/ ?

16. I’m sorry you didn’t like the article. To be fair, this method offers a simple, usable and compatible method for creating the desired effect. It was never intended to be anything else.

17. Nick Franceschina wrote:

    >Why does this article exist?

    To help web designers who need to create drop-down menus do so with light, semantic, minimally invasive markup and code.

    >Isn’t this the EXACT same thing the Suckerfish article was about, except that the menu is styled horiZontally?

    Not exactly the same, though both share a desire to let designer/developers work with light, semantic, minimally invasive markup and code.

    >do we really need another entire article just to figure this out?

    You might not need it, but some readers do. I found it helpful myself (and I’m not a fan of drop-down menus).

18. Okay, this may seem like a pointless comment but the issue date says June 22. And nobody posted comments until the 29th? Yup, I’m AR.

19. To those that would be critical of this article because it seems to repeat ideas of other articles…

    How many chocolate chip cookie recipes would you imagine that there are in the world? You may even have a favorite. They are ALL valuable because they include their creators own understanding and contibution to the subject.

    Please people, quit whining about the incredible generosity/information people put into these articles!

20. Amen. If you don’t need it, skip it. If you can use it, at least say “thank-you.”

    Me, I’ll be fixing my dropdowns shortly.

21. Hi, I’m just wondering what id “#menu” is referring to in your writeup. When I tried to build an example page while following with the tutorial, the menu doesn’t look right in IE.

    * html #menu ul li { float: left; }
    * html #menu ul li a { height: 1%; }

    But I noticed in the actual code of your examples you have this:

    * html ul li { float: left; }
    * html ul li a { height: 1%; }

    Can you clarify?

22. I left out the other “height: 1%” in my last post but you get the idea. Thank you for the article. The menu on Naarvonen is indeed a pretty alternative, it isn’t so helpful for people that need a tutorial written in English.

23. I liked your article. I have had many clients that have requested these types of dropdowns. Plus I have used these dropdowns on internal intranets, and they work great.

    Thank you for the article.

24. Lisa……you have spotted a mistake! The #menu belongs to a div that was wrapped around the menu. I removed it, but looks like it’s been left in the article (my fault!). I have requested the change.

25. This article is a perfectly valid addition to ALA, as has been proved here by the people who found it useful.

    There is more to ALA than cutting edge, hot off the press techniques for poncey web developers. Its appeal to working web professionals is what makes the magazine so popular.

26. Yeah, I just tried this and it’s quite slick. Avoids JS it seems. Nice link…

27. I didn’t mean anything against the generosity of the person that wrote the article… they did a fine job… but it seriously seemed to be EXACTLY the same article, just horiZontally rendered. Do we need two brands of chocolate chip cookies that taste exactly the same but are arranged in the package by rows instead of columns?

    The problem is that everyday we are bombarded by too much info as it is, and would prefer not to waste my time on dupicate info coming from the SAME site…

    …and I have to READ the damned thing before I know I should have skipped it (cause I keep thinkin ‘ok, there’s going to be something different coming soon’)

    In the end, I appreciate those that take the effort to contribute… but are we really contributing here?

    -still a bastard (but actually a swell guy)

28. Well, Nick Franceschina, I personally was grateful to find an article on the horizontal rendering of the menu, instead of the vertical.

    Now play nice.

29. Does anybody know of any javascript that will disable or hide the select element tag?

    The problem only occurs in IE when the dropdown menu overlaps a select tag in form. It appears that nother will override the z-index of the select tag in IE exept to hide it.

30. Nick… if time is so precious to you, why do you bother to waste even more time complaining? This article helped a lot of people.

    Perhaps this article didn’t help you or perhaps you think you could have figured it out yourself without this article. Does that mean because you personally didn’t find it useful that this article should not be published? Give me a break.

    This site was not made to please you, it’s for a general audience of web professionals/developers/designers to learn something new, and with this article, many people learned something practical to apply to their applications.

31. I don’t have much to say here. The easier it is for me to be standards compliant the better.

    On an unrelated note, I don’t understand why people might not like menus. I, personally, love them. I like them, but Zeldman doesn’t. I’m not a professional web designer, but he is. Coincidence? I hope not. :^/ ;^)

    I really the effort that everybody puts into teaching us about web semantics & standards. Until I learned about them, I never knew that there could be such joy on the web.

32. There have been usability studies that demonstrate that people can have trouble using this style of menu.

    It has been shown that users will move their mouse over the first level, which will show the second level. They will then scan to find the item that they feel is most appropriate and then move the mouse towards that item. Using the example in this article as a demonstration, let’s say that a user wants to know where the offices are located. They move their mouse over About. They see the Offices link in the drop down but when they move their mouse towards the Offices link, they cross over the Services link and suddenly the Offices link has disappeared.

    But as has been iterated before, some clients are persistent in the features that they want on their web site and therefore this article will no doubt come in handy.

    (too bad I don’t have that study bookmarked…)

33. Eugene is referring to this post:
    http://www.zeldman.com/daily/0604f.shtml

    I, too, wish I had bookmarked the Famous Study showing how drop-down menus can confuse users. But that study focused mainly on the MECHANICS of using drop-down menus, which can be tricky for some users. (For that matter, using the scroll wheel on an iPod can also be tricky for some users.)

    My objection to drop-downs as a rule ��� having nothing to do with the quality of the current excellent ALA article — is *not* that novice users can find them cumbersome.

    My objection is that the ability to visit any page of a site with one click is vastly overrated and not what most users need or want, in my experience. Steve Krug, one of my favorite authors on usability, says the same thing in his excellent book, Don’t Make Me Think.

    http://www.amazon.com/exec/obidos/tg/detail/-/0789723107/

    Krug has conducted countless usability tests on real-world sites, with real users, and he concludes that users are perfectly happy to drill down through architecture that is organized per their needs.

    My experience as a user confirms this.

    Forget about websites. Consider software. Consider well-designed software.

    When I’m making a selection in Photoshop, the selection tool is highlighted, and additional selection options become available from the tool bar. Typographic tools are not instantly available, but that’s okay, because when I’m making a selection, I don’t need to kern type.

    Likewise, when I’m setting type in Photoshop, Quickmask and other selection tools aren’t immediately available, but that’s okay because I’m setting type, not making a selection.

    Photoshop’s designers give me the tools I need when I need them, and hide them when I don’t need them. That’s good design.

    By contrast, too many sites bombard me with irrelevant material, and drop-down menus are one way many sites perpetrate this UI error.

    But some clients insist on them anyway, and when they do, this ALA article (along with Suckerfish Drop-downs) will come in handy.

34. Excellent article once all the bugs got worked out.

35. Firstly, I think it’s great that the Suckerfish approach has been brought into this article and applied slightly differently. I still think that the Suckerfish way is the best way of creating dropdowns and if that can be expanded on, it can’t be a bad thing.

    Both Dan and myself have had a lot of positive feedback since the original article was published and the approach has been used in practical applications all over the place.

    As for the usefulness / usability / personal taste for dropdowns, well, I think the main point is that if you’re going to do something (whether you want to or whether you’re told to), you might as well do it in the best possible way.

    To pick up on a few comments (and to make a cheap plug for my site), the Suckerfish Dropdowns method has been improved upon at http://htmldog.com/articles/suckerfish/dropdowns/
    which has wider browser compatibility, improved JavaScript and allows multiple dropdown levels.

36. http://www.alistapart.com/discuss/horizdropdowns/4/#c8687

    This is a problem with IE in that select items bleed through. I have code that eliminates this problem by inserting an iframe shim underneath the drop down. It’s not an original idea, I just modified the suckerfish drop downs javascript file to add an iframe shim. I was thinking of writing an article, but it’s really only to fix a problem in IE, so I never submitted an article.

    You can download it at http://tanny.ica.com/TKO/tkoblog.nsf/dx/topnav.js

    The content management system I’m using does not support the correct content type so when you go to the page, right click, view source and save the file, otherwise it will not have formatting. Sorry for the inconvenience.

37. They aren’t worth the trouble, aren’t usable, yadda yadda yadda. If you have a client that won’t do without them…fire them.

38. I get JavaScript errors when I try to view my page that follows your examples. The JS code goes in between tags that go anywhere in the HTML doc, correct?

39. >> If you have a client that won’t
    >> do without them…fire them.

    Kadavy: Although you’re perfectly within your rights to not only give that advice, but also to exercise that option yourself, some of us have to work for a living.

    As Zeldman and a few others have pointed out, this isn’t really the right forum to discuss whether or not popup menus are good or bad. The fact is they’re fairly popular and sometimes they’re called for, either by designers or by check-signers.

    If we have to make popup menus, we might as well have an informed, standards-compliant way to implement them, and this (as well as Suckerfish) seems like exactly that.

40. We moved away from hover-type menus at our institution (from this http://oldweb.plu.edu/ to thishttp://www.plu.edu/faculty-staff) recently since we found most folks simply didn’t see the information contained within them. Give me a good ol’ Yahoo style index to a site and I’m a happy camper — lots of text but most everything’s right there in front of me.

    Also, here’s a study done examining different types of menus: http://psychology.wichita.edu/surl/usabilitynews/51/menu.htm

41. see… now THAT was worth posting!! Thanks Patrick!

42. re re: not too happy with … by Nick Rigby

    > Excellent article once all the bugs got worked out.
    I couldn’t have said it better – except for the excellent, it’s not a bad article, but as mentioned before, I’ve some issues here.

    Of course, the ala makers don’t own us anything, and I’m grateful for the beautiful and mostly informative site and the work involved, nevertheless excellent previous ala articles have pampered me to expect flawless quality, meticulously edited. Once again, this has not been the case …and Nick, editing is mainly the editor’s task, not the author’s.

    Please take this criticism as being constructive.

43. This solution seems a bit too complicated… If you are going to use JavaScript, you might as well do the whole thing in DHTML.

44. This technique is slim, simple, and incredibly easy to modify.

    Nick, I wrote an article herein ALA about using HTML in emails and many people in the forum raked me, too, over the coals for having the nerve to even consider such an outlandish concept.

    As many people in this forum have pointed out, we work for a living and our checks are written by our clients. If they want something with which we disagree, we are better off using a compliant technique to make it happen then simply “firing them,” as kadavy so arrogantly pointed out.

    Cheers to you and your technique. If and when it comes down to my having to build a drop-down menu, I’ll be happy to have your article as a companion.

45. Well first off,thanks for the article regardless of whether it was repetitive of previous stuff, it did generate useful discussion and some interesting links regarding menus.

    Personally I avoid java completely, simply because I just don’t understand it and how to use it; so when java minimal articles pop up, so do my ears, so thanks.

    On a related topic though and following on from the cascade vs index menu side-bar discussion that this article generated. How about very interactive sites without any obvious menu where the user has to get down and dirty and really explore a site to find things out, I’m thinking along the lines of a site aimed at kids where they have to move the mouse over basically every possible object on screen in order to uncover information and links etc. Any thoughts on that? In particular I’m thinking of a previous article “Blob” using one image and different states, would it be possible to take this further and add a further level of menu to this? Just asking, thanks.

46. Okay, I went back and searched for the article, it was

    CSS Sprites: Image Slicing’s Kiss of Death
    by Dave Shea

    http://www.alistapart.com/articles/sprites/

    The question is is it possible to turn something like the sprite rollover into a multi-level menu?

    Mind isn’t there and easier way for ALA to organise the articles? I only had a vague recollection of what it was about so I trawled through them all looking for it. Which actually was quite useful as there are some articles dating back to 2001 that were quite interesting. Hmmm, someone needs to do a retrospective of ALA articles, but then they might get accused of repeatig stuff 😉

47. Four pages in to the comments before some tuned in chap mentions the ghastly usability of this kind of tomfoolery.

    Go on, alienate your users by frustrating them with links that disappear as they reach for ’em.

    Nice code, dire product.

48. Is it possible to make the sub menu items accessibile for people unable to use a mouse?

49. The method used in Naarvonen is pretty similar and definately no better than this one (in fact a little bit needlessly complicated)

    As for usability, many bad UI features have been traditionally used and then learned by users and now are considered good practice because they are what the users has come to expect. (the Jacob Neilson put-it-on-a-suck-list-today-and-recommend-it-tomorrow factor) I think this one nicely fits the bill.

    …just a shame it needs script at all. Curses on Bill Gates!

50. I like flyouts and dropdowns when, and this is the important part, when they are easy to read. Any article that gives me more options for designing dropdowns in CSS and semantic mark-up is fine by me. Thank you, Andrew.

51. Hello,

    Just wondering if it´s possible to have multiple levels, and how to go about that.
    PS: It works fine in firebird5.0.1.6 · ie6 · mozilla1.5 · netscape7.1 · opera7.11 (css and js files of course are needed)

52. Fom a users standpoint, I don’t really like the menu (at least on Safari). These types of menus are very frustrating – you really don’t have anything that hightlights the link, and the whole bar is a navigational element (glove is always on).

53. Because DHTML is slower than natively supported CSS. I have implemented revised Suckerfish menu system for my client, and take my word for it – when the menu reaches certain level of complexity (structural, and visual/decorative as well), IE slows down noticeably. Firefox, however, flies through regardless.

54. * …many bad UI features have been traditionally used and then learned by users and now are considered good practice because they are what the users has come to expect…

    My point exactly. Think violin. It would have horrible usability ratings as a tool for producing acoustic waves, but there are many very devoted and highly respected users… 🙂

55. This code work good but i want to change it to horizonal menu and vertical sub menu,do anybody know how to make it?

56. Reference all the comments about this article adding nothing new to the Suckerfish article, I agree, but I like this article more as a reference simply because it is so short and (not being mean here!) dull. When you’ve already read the original, its nice to have this shorter article to refer to. No?

    Of course, each time I read one of these articles, I realise how I missed my own 15 mins. of fame; I built a similar** CSS/JS menu way back in mid-2003. And mine also works in Opera 6! 😛
    See: http://haldanefoods.co.uk/

    **Although I use Suckerfish now as I think its more elegant. And also, mine doesn’t work quite right in Mac IE5!

57. Having another article in the queue for ALA, I am really starting to wonder if it is worth it when I read the comments to _any_ article published here. These comments here should be related to the article, we all know about the pros and cons of using dropdowns for navigation by now. My favourite character posting here is the “oh but I did that years ago but wasn’t fussed to release it as an article”-developer. Good for you, bad for the development community I’d say.

    As to the article: Nice work, I like the thorough CSS explanations, but the JS is far from up to date. It is good that the display is kept in the CSS, and applied via JS, but as someone pointed out earlier, multiple classes should be supported and “over” not being a unique name for this effect. Another small annoyance is that variables are not defined as local and the useless “document.all”. The proper check for DOM should be checking for document.getElementById and document.createTextNode (to kick out older Opera versions that claimed to support DOM but didn’t really).

58. Weeellll, I don’t care if it’s a duplicate or not, I think it’s great!
    I’m going off to find someplace to use it now.
    Thx ala.

59. First, good article. I was just looking for a streamlined way of doing a menu like this for a vanity site, and this may be it…hopefully.

    But, I’m implementing this as part of an actual page, not just a standalone menu page, and looking at it in IE 6.x and NN 7.x all is well. But, in IE 5.01 sp1 and 5.5, the entire menu likes to slide up and down the side of the page on mouse over. Anyone else seen a behavior like this? if anyone is still using an old IE… http://www.ericutsey.com Anyone with any ideas on how I can stop this?

60. So this is the point: Many people read this site as if it were written excathedra. The article was very well written, the technique and the script has many holes in it that would have been uncovered in a good technical editing session.

    So, God give it a rest and take a little longer to publish an article. Do a bit of testing. There are newbies out there reading these articles.

61. Al, what would a menu system like this cost on PVII?

62. Liteweight, fast, horizontal..just what the client ordered.

    Thanks for the great article. Many minutes will now be spent converting older sites in our stable and ridding them of bloated javascript.

    It’s like a laxative for flyouts.

63. Dear Al,

    The article’s focus is on markup and CSS, not scripting, and we’ve heard of just one possible problem:

    http://www.alistapart.com/discuss/horizdropdowns/2/#c8668

    I believe the problem described in that post has to do with bugs or limitations in Konqueror 3’s CSS support, and nothing to do with the brief script, which is there merely to work around potholes in IE/Win.

    If you know of genuine problems with the script or with any other part of the article, you’d be doing readers and us a service by listing the issues. Since concern for “newbies” was your motivation in posting, I’m sure you’ll want to help those folks by sharing your technical concerns about the article.

    You may be approaching the article as you approach the excellent software your company develops and sells. But software products and tutorials serve different needs and arouse differing expectations. Your software has to be bullet-proof. That’s what your market requires.

    But an ALA tutorial is different from a commercial software product. It’s a useful or innovative idea, put before the community at no profit, as open source. We test in most Mac and Win browsers before approving an article, but we never claim anything we publish is unimprovable. An ALA tutorial would be no use at all if it were perfectly self-contained. The whole idea is for readers to take it and run with it, and, in doing so, to improve it.

    Lastly, you said:

    “Many people read this site as if it were written excathedra.”

    Do they? Most of the readers I’ve encountered are pretty sophisticated, not only about design and technology, but also about the fallible nature of anything published online (or offline). Some of our readers are less experienced than others, but I don’t see how they’re harmed by gaining access to a fast, semantic, lightweight drop-down menu that is easy to implement — and free. So what’s the problem?

64. Nice article Nick. I found it helpful and I really like the reuse of the suckerfish drop downs script. Even though I don’t like drop downs, vertical or horizontal, I did like the article, the css and your approach.

65. Hi Neill,

    It would likely be in our Tutorials section and free – like the other ones in there 🙂

66. Hi Jeffrey,

    You wrote:
    “But an ALA tutorial is different from a commercial software product. It’s a useful or innovative idea, put before the community at no profit, as open source”

    You misunderstand my motivations as you obviously misunderstand what we do at PVII. The vast majority of content on our site, including various menu systems, is free. Our “products” are a different animal completely and involve GUIs that run inside Dreamweaver. Most of your readers would have little use for them unless they used Dreamweaver, of course.

    The technical imperfections in the technique described in this article were mentioned in a few comments posted before mine 🙂

    While the readers you interact directly with may perceive the information in the articles you publish as inspirational or provocative, the folks I interact with place this site’s content on a much higher level. They could be described as being in awe.

    So don’t take my little post here as anything more than an honest assessment by a reader who finds your content very interesting.

    If this menu technique comes up for discussion on our CSS newsgroup I will make it a point to contact the author so he can take part in the discussion.

    Best,

    Al Sparber

67. Nice. I especially like the accessibilty of this menu.
    It doesn’t seem to be working in NS6.1 on win though.

68. behavior:url() would seem the appropiate way for IE, but then you loose compatibility with IE5+ on MAC.

69. Thanks for publishing the article. It may be a copy, but I hadn’t seen the “original”!

    As for non-mouse operation, i’ve tried this in ie & firefox (you can access the top level menu, but not sub-menus) opera (can’t seem to access any links by tab button).

    If this can be fixed, and the issue of css on and javascript disabled, it would be a very good, simple menu!

70. I was reading an article on the web somewhere, where a person was making the arguement that drop-down menus were unuserfriendly. They were making the assertion that the problem with cross-browser compatitbility and even general usefulness doesn’t justify its use, I mean I could immediately come up with some counterpoints but, he offered up some good opinions regarding the matter.

    I was wondering what you all thought, do you think Drop-down menus are an effective form of site navigation or do think the usability especially for visitors with say screenreaders warrant their use?

71. my answer is: depends… put the info in the right place and it will always be useful IMHO.

    on your second point: accessibility is something different than usability. 🙂

72. Our current web sites have been plagued with DHTML drop down menus for the past 2 years, and I think this article and the Sucker Fish one have pointed me in the right direction…

    Except for a few things…

    I am currently using a horizontal navigation bar (like Sucker Fish) with graphics and vertical drop downs with text for sub menus. My issue has to do with the width of the submenu and the length of the text.

    I have found the way to stop the text from wrapping, but the borders do not line up properly… I have the menu working fine without borders, but that is the look and feel that is currently being used in the bloat versions.

    I figured I would post in this question just in case somone else needed to expand the width of the submenus of a horizontal menu.

    here is the current site:

    http://www.dsionline.com

    here is the example:

    http://www.dsionline.com/nav

    if you see something that looks odd, let me know because after all, I’m just a Flash Expert 😉

    rascalpants
    New Media Designer

73. I have to say I have seen a lot of great article on this site. Yet this one stands out because of how simply it is while at the same time been so useful. So, I would like to extend my THANKS to you.

74. I’ve started using CSS lists not too long ago. I didn’t know how power CSS was until I saw how it could transform simple bullets into beautiful menus. 🙂

    I found a site a while ago that shows many different types of menu styles as well. You can find it here: http://css.maxdesign.com.au/

75. >> Our current web sites have been plagued
    >> with DHTML drop down menus for the
    >> past 2 years…

    Although I’d agree that most of the Javascript-driven menus are implemented badly, is there really anything wrong with DHTML menus in theory?

    I think Javascript has a bad rap. If implemented in a degradable, non-intrusive manner, DHTML menus can be just as “good” as CSS ones, and potentially a lot more flexible, too, allowing us to not necessarily rely on the quirky :hover implementations of certain browsers.

76. If you take a look at the current source code the runs the menus on our sites, it take 3 or 4 files with hundreds of lines of code on each to run a simple drop down menu…

    but my main problem is that it does not work some of the browsers that we are targeting… our audience is uses IE 6 most of the time, but sometimes we have IE 5 and 5.5 users still… and even an IE 6 build or revision will screw everything up…

    I tested this articles solution in my environments, and it worked the same in each of them…

    now I just need a little tweeking to be done to make it look the same as before…

    rp

77. Thank you very much Nick Rigby. This is an excellent article. For me this is an easy way to build dynamic menues using css.
    Best regards. eigeneachse

78. Accessibility is something different than usability?

    That wrong impression is what makes a lot of people spend big amounts on useless accessibility redesigns right now because “it is the law”. If usability means cutting down on accessibility then you can safely say that either the accessibility requirement is from another planet or your usability measure is developed in a bad way.

    Accessible sites should also be usable, by definition. A lot of the “but this isn’t accessible” posts and emails these days are based on technological problems (false browser, unknown facts about screen readers) than real usability issues for users with disabilities and assistive technology.

    If you separate accessibility from usability then you are in for a rude awakening when you really have to work for users with accessibility needs.

79. Now we’ve seen thsi tech before; it doesn’t take a genius or experienced developer to figure their own way of coding a suckerfish drop down horiZontialy.

    ALA has done this before; any remember the countless drop shadow techs that were publishe done after another????

    In the articles defence they did show something different; but i mean cmon; there has to be more creative articles that can be written; discussed and abused by users who hate repeated un-creative not thought out work.

80. I was looking for a good CSS menu example when I came across this article. Unfortunately it didn’t do what I wanted it to do, since I needed a horizontal menu bar at the top followed by pull-downs. On top of that I need the pull-downs to have flyouts.

    Well this article inspired me and I did get a working example of full fledged menu. Go here to check it out and let me know what you think.

    http://www.frinc.com/personal/charles/cssmenu/

81. Thank you very much for providing this article. As a casual web developer trying to get some stuff done quickly, I find your site extremely helpful and easy to use. You do a great job making obscure things usable by those of us who, sadly, don’t have time to become experts.

82. Display:none is not a good way of showing and hiding elements, as you do hide them from several screen readers that way, effectively making them “dead” markup[1]. Try considering the off-left technique instead [2].

    [1] http://www.alistapart.com/articles/fir/
    [2] http://css-discuss.incutio.com/?page=ScreenreaderVisibility

83. Does anyone tried to make it horizontal?

84. There are a lot of comments above about cross-browser compatibility, loading speed and horizontal menus. Take a look at the successor to the article which started all this for solutions:

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

85. Is it me or does this menu flicker horribly within any Netscape Browser?

    Until this is sorted I wouldn’t consider using it, as Netscape constitutes 7% of the visitors to my site.

86. We’ve deleted a message impugning the motives of a poster here, along with the poster’s response. Discussion of an article’s pros and cons is welcome here; personal quarrels are not.

87. If your site can be accessed on a mobile phone by a blind person via a screen reader it is accessable.

    If your site can be successfully navigated by my mum, it is usable.

    You could argue however that in order for a site to be considered accessible by everyone, it must be usable. Therefore accessability is a subset of usability, or a chapter in the usability book, if you like!

88. While toying with this code a bit I had an idea that may enhance the menu. Instead of setting the nested menu’s display to none, how about using Image Replacement (whatever flavor you prefer) to replace the non-hover nested list with an arrow absolutely positioned to the right. Then apply all of the other styles to the hovered nested list.

    The effect: having a visual signifier that the top level li has a sub menu, all without adding any extra markup.

    I’ve got an example that works in Firefox, but I haven’t tried any other browsers.

    And I hope what I said makes sense to somebody…

89. I think its clear that complaining about these articles is like being invited to a friend’s for dinner then complain about the food… its bad form.

    However. I think that some of these complaints are posted with the desire to improve on this forum rather (as with some) to simply deride it.

    May I suggest the following:
    – articles receive a preface outlining things like possible overlap with previous known articles on the site – perhaps it could be set up in a list style with links to those articles – acknowleging possible overlap (or overlap with stated modification) would help clear some confusion – though I think this happens seldom

    – Perhaps you could offer a suggestion box for those who feel they have valid suggestions or complaints could provide you (rather than the writer of the article) with feedback. This could contribute to greater user-satisfaction, no?

    I think a valid criticism mentioned earlier stems not from an unappreciation of the content but rather a failure to provide adequate description/preface or organizing for directing the appropriate audience. And with the wealth of information and the range of users-skills involved this hardly should come as a surprise.

    Personally, I have benefitted, from this site and the book, & have been brought up to speed at a ridiculously faster rate than without either.

90. In my example (link in previous comment) I assigned the arrow using this method:

    .HasChild
    {
    background-image: url(arrows.gif);
    background-position: right;
    background-repeat: no-repeat;
    }

    You do have to assign the class to the li that has a submenu manually, but that removes the dependency on JavaScript.

91. Sniffer,

    I tested in Netscape 7 and 7.1 and there should be no flicker. What version are you using and what OS?

92. I viewed your menu in IE 5 on Mac OS X and the dropout menus don’t work.

93. Still learning this CSS thing, in your article you mentioned applying the “Holly Hack”.

    Being that I’ve never used any of these workarounds, where does it go in your file?

94. After reading HTML Dog & other comments, I can see that I was off-topic. I meant no disrespect. Sorry about that. I was under the impression that this was the place for discussing Jeffrey Zeldmen’s comments on his site as well as the author’s comments. It seems that I wasn’t paying much attention. I subscribed to Jeffrey’s blog entry via RSS feed to keep track of the articles here. Thus, I subconsciously put 2 & 2 together to conclude that anything that Jeffrey & the author wrote was on topic. My bad. I apologize. If I caused any problems with anyone, then I ask forgiveness from each person.

    On another note, I said, “On an unrelated note, I don’t understand why people might not like menus. I, personally, love them. I like them, but Zeldman doesn’t. I’m not a professional web designer, but he is. Coincidence? I hope not. :^/ ;^)”. I meant that as a self-deprecating joke, & if I understand correctly, that came as the exact opposite. I do believe that he is the master & I am the beginner & the joke was meant to highlight that. Humour isn’t my forte. My conscience is bothering me & I need to know: did I cause offense?

    Lastly, thank you very much to Jonathan Snook & Jeffrey Zeldmen for explaining why these menus are no good. I’ll try to avoid them as much as possible. I think that you just saved my father’s web site from great misfortune. I am literally in the middle of a redesign.

95. I understood the javascript in the article and was able setup the menu fine, but I would like to use a nested menu and so I tried using the modified scrpit above “Improvement on the JavaScript | by Tom” I can’t get it to work though. Could someone explain what needs to be done to the javacript or html in order for this to work?

96. I liked the suckerfish menu lots. And drop down menus are good for those that want to have simple to find links to other pages on there menu.
    I am just in the process of changing my menu over to a the dropdown suckerfish menu.
    http://www.carsinlondon.com/seo-techniques.html and it works just fine.
    Now if MS could just fix there a:hover blindness so we wouldn’t have to use js that would be great.
    bobmutch

97. Imho :hover should only be applied to links since allowing any element to be hovered would not be seperating behaviour and structure. :hover should stay as it is in IE: just for links.

    Why does ALA let this be published? It’s the exact same thing as the Suckerfish article only the menus are horizontal. With this article, imho, ALA is like a bad TV show: it repeats plot lines (content) of old episodes (articles).

98. Have tested http://www.alistapart.com/d/horizdropdowns/horizontal2.htm and http://www.alistapart.com/d/horizdropdowns/horizontal.htm in Netscape 7.1 and Mozilla 1.6 on Windows 2000 PC. The sub menus only appear when you scroll over the pixels of the text within the main menu. If you run your mouse along the word then it will flicker.

    Also concerned by David Lees comment that it doesn’t work in IE5 on Mac OSX.

    If you sort these issues out then I could be persuaded to use it!

99. Hi all,

    I’ve updated my version of the CSS menus that has no technical limit on how deep you can go.

    It has a horizontal menu bar at the top, then pull downs and flyouts.

    http://www.frinc.com/personal/charles/cssmenu/index2.htm

100. Is it possible to have this done with a horizontal menu at the top of a page?

     Thanks

101. The submenu seems to be transparent even when I set a background color to it and the text it is placed over bleeds through. Can someone explain why this is happening? Thank you.

102. Sniffer.

     I have tested both Netscape 7 and 7.1 on a Windows 2000 based PC, and have discovered no problems.

     Anyone else experiencing problems with this setup?

103. this is pretty cool, it’s what i was looking for from a google search.

104. … :hover should only be applied to links since allowing any element to be hovered would not be seperating behaviour and structure. …

     Exactly the opposite. By allowing only the links to respond to mouseover events, you assigning a specific behavior to a specific structural element, which is as far from separation, as it can be. Structurally, a link is just a reference to some document or location within some content; traditionally the links were indicated by underline and blue color – this is the essence of nailing presentation (and behavior, too) to the content, which we are trying to avoid now.
     Allowing ANY element to detect user actions and respond to it would give the designer greater control over presentation and behaviour of the visually neutral content.

105. It’s possible that I may have missed it if someone mentioned this earlier. Has anyone addressed the z-index issue? When the sub menu isn’t flush against the right side of its parent, the lower ‘li’ shows above the submenu. Any thoughts?

106. Hi,

     My name is Mathieu Synnett and i’m an student in multimedia. Please scuse my english.

     Then i needed to do a drop down menu for a web site. I tried your’s but when we add a sub menu into an another it don’t work. The sub-sub-menu appear at the same time than the sub-menu. I have no knowledge in javascript then, i can’t resolve this problem for you.

     P.S. The example in dutch is work but i don’t understand it.

     if you understand or not please answer me at info@msmedia.ca

     Thanks a lot

     Mathieu Synnett

107. How can I do this horizontally? (just kidding)

     I do have a question. Does anyone have an idea how to keep the top-level menu highlighted when the mouse moves into the submenu? I would love to eliminate the sole reason for depending on JavaScript.

     By the way, this article – and its Suckerfish inspirer – are excellent. I appreciate every technique I read on this and other helpful sites, whether I use them or not. Otherwise, I wouldn’t visit the sites. I also like the productive discussion entries, but I certainly don’t need to read complaints without solutions.

108. Great Work !

     I was looking at this article and the suckerfish one earlier and that one works ok
     but when i stack button on button it causes all sorts of trouble, i dont know if this makes sense but i list the buttons horizontally say 4 lists then 4 flush on the bottom of those so i try to dropdown a button on the topline it causes the other menu to shoot down to the bottom, is there a way around this so it overlaps ? Sorry, im a newbie : ) It would be cool to stick with CSS for all this

109. Like several others, I spent long hours applying my limited CSS/Javascript knowledge to the suckerfish article to acheive this effect, but finally gave up. Now I got it to work! Thank you.

110. Works it also for more menu depth than one level?

111. I thought the whiners were being too bitchy about repetition. If I had the suckerfish article only, being the novice I’m, I would have gotten stuck. Right now I can probably fiddle around with the existing horizontal menu to get it up on my site. But the one problem is that the submenus of the submenus pop up as soon as we enter the higher order submenu. Someboyd pointed it out earlier by adding a third laye or UL in the “About” section of the example given. Can somebody help me out and explain how to rid of this little problem?

112. The background in li a not only has to be declared, but it also can´t be transparent.

113. First, I like how lean the code is with this method of what my company calls “DHTML menus”, for lack of a better term. Our JavaScript code for this was getting pretty snarled, but I think I can use this code to make things much better.

     Second, for those who don’t like hover menus, just about every GUI OS I know uses hover menus, unless you exclusively use keyboard shortcuts. Click on the “File” menu on this window to see what I mean 🙂

     Third, here’s my question. I’ve had at least one site where I needed both a DHTML element and a bulleted list on the same page. I wanted to use the default display for the bulleted list, but when using the ul and li tags for DHTML and JavaScript similar to what this article uses, the bulleted list (obviously) was not displaying in its default matter. Any suggestions for this? I was hoping there’d be a solution that doesn’t involve me writing out a separate style for the bulleted list 🙂

     PS: First time posting here, and I’m not heavy into CSS stuff (yet). Thanks for reading!

114. Jeff: Simply give your menu ul an id, say “menu”. So the CSS rules for the menu would be changed to only work on this one ul.

     The CSS rule selectors would become:

     ul#menu
     ul#menu li
     ul#menu li ul
     ul#menu li a

     … etc.

     Then, you can style normal bulleted lists by selecting ul {…}.

     The article probably should have used this method so it is easier for people to incorporate it into pages with other ul’s.

115. Seth,

     I thought of that, but it only works for the first level of menus. Here’s an abbreviated version of the style sheet I’m using now:

     ul#nav { }
     ul#nav li { }
     ul#nav li ul { }

     /* Styles for Menu Items */
     ul#nav li a { }

     /* Fix IE. Hide from IE Mac */
     * html ul#nav li { }
     * html ul#nav li a { }
     /* End */

     ul#nav li a:hover { }
     ul#nav li ul li a { }
     ul#nav li:hover ul, li.over ul { }

     It doesn’t seem to work when there’s a ul inside the li (which is inside the ul#nav). Any idea around this?

116. ** Chuck:
     To highlight the menu item in every menu layer, I think you need something like this:

     ul li:hover, ul li.over {
     background-color: #000;
     color: #FFF;
     }

     This should work since when the pointer is :hovering over a sub-menu LI, it must also be over the parent LI since it contains the latter.

     ** Krishna:
     The problem you have with sub-menus is that this rule:

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

     is making all the sub-UL’s visible too. So you need an additional rule to hide them, e.g.:

     li:hover ul ul, li.over ul ul {
     display: none;
     }

     but then, you need a further rule to make the sub-menu visible when *its* parent is being :hovered over! E.g.

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

     ** Jeff V:
     Seth’s suggestion should work! To expand a little, the problem you have is that the CSS rules are being applied to *all* UL and LI elements. What you want to do is apply these CSS rules only to UL and LI elements that are part of you menu. To do this, the top-most UL element of the menu should have an ID attribute containing a *unique* name (ID attributes must be unique!), e.g.:

     • And then change your CSS result to begin with #nav. NOTE: #nav refers to the top UL element itself and since the id it unique, it refers specifically to that HTML element only. E.g. the rule:

       ul { background-color: red }

       gives all UL elements a red background, whereas this rule:

       #nav { background-color: red }

       *only* gives the element with the ID of “nav” a red background. So back to your stylesheet, it currently begins:

       ul#nav { }
       ul#nav li { }
       ul#nav li ul { }

       But the problem here is that the browser will look for an element with an id of “nav” that is a child of a UL element! When you use the #id CSS selector, there’s never any point in prefixing it with any other elements since there is only ever one element in the document that could match. So instead write:

       #nav { }
       #nav li { }
       #nav li ul { }

       Hope this helps everyone!! (btw – I’ve not tested *any* of the examples here, but hopefully even if they don’t work, they’ll give you an idea of how to proceed).

117. Thanks for replying Peter. I tried to apply what you suggested, but it’s still not working properly. Here’s an online version of the page I’m working on:

     http://www.jhvj.com/test_dhtml.html

     Here’s an abbreviated version of the current style sheet:

     #nav { }
     #nav li { }
     #nav li ul { }
     #nav li a { }

     /* Fix IE. Hide from IE Mac */
     * html #nav li { }
     * html #nav li a { }
     /* End */

     #nav li a:hover { }
     #nav li ul li a { }
     #nav li:hover ul, li.over ul { }

     As you suggested, I used #nav rather than ul#nav, but it’s still not getting the result I’m looking for, which is having normal bulleted lists while having the DHTML menus on the same page. It’s fine for the first level, but it looks like having the UL inside of the UL is causing problems. Any more suggestions?

118. Oh yeah… I forgot about that! 😀
     Since we’ve replaced the first UL rule with #nav, it now only gets applied to the top-most UL — hence the first level of the menu works fine.

     So to fix this, change:

     #nav {}

     to:

     #nav, #nav ul {}

     so in English it says the element with id “nav” and all UL elements below it. And I’ve even tested this, so I know it works this time!!

     HTH – Peter.

119. I have been fooling around with the css, but I have failed to find a way to make this into a horizontal menu. Does anyone know what I have to do?

120. Jeff,

     The easiest way to do this would be to wrap a div around the whole drop down menu. I will call it menu for this example. CSS would look like this

     #menu ul {
     margin:0;
     padding:0;
     list-style: none;
     width:150px; /* Width of Menu Items */
     border-bottom:1px solid #cccccc;
     }

     #menu ul li {
     position:relative;
     }

     #menu li ul {
     position:absolute;
     left:149px; /* Set 1px less than menu width */
     top:0;
     display:none;
     }

     /* Styles for Menu Items */
     #menu li a {
     display:block;
     text-decoration:none;
     color:#777777;
     background:#ffffff; /* IE6 Bug */
     padding:5px;
     border:1px solid #cccccc;
     border-bottom:0px;
     }

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

     #menu li a:hover { color:#E2144A; background:#f9f9f9; } /* Hover Styles */

     #menu li ul li a { padding:2px 5px; } /* Sub Menu Styles */

     #menu li:hover ul, ul#menu li.over ul { display:block; } /* The magic */

121. It was the first time I read the drop-down like tutorial, and I liked even if it is a sort of ‘copy’ of the Suckerfisch-thing

     What I noticed is that when you’ve got several <ul id=”nav”>’s on your site, only the first will work in IE and all the other won’t. So I addepted the js-file a little:

     <code start>
     startList = function() {

     if (document.all&&document.getElementById) {
     var collUL = document.getElementsByTagName(”UL”);
     for (j=0; j<collUL.length; j++) {
     if (collUL[j].id==”nav”) {
     navRoot = collUL[j];
     for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName==”LI”) {
     node.onmouseover=function() { this.className+=” over” }
     node.onmouseout=function() { this.className=this.className.replace(” over”, “”) }
     }
     }
     }
     // navRoot = document.getElementById(”nav”);
     }
     }
     }

     window.onload=startList;

     </code end>

     That’s my contribution,
     Mathijs

122. I’ve read about your nice ‘accesibility’ questions, and you can easily use the AccesKey-property to make links accesible for non-mouse users, of course they need a keyboard…

     Another way is using the :active-pseudo class and the gotFocus-thing for IE
     (using a tab-like navigation style that is…)

     I also read the arrow-thing, wich I’ve created myself too, but in another way wich allows me to still have a background-picture and an arrow:

     
     .hassubs { background: transparent url(“arrow.gif”) no-repeat right center;
     width: 13px;
     height: 20px;
     padding: 0 0 0 0;
     margin: -15px 0 -5px 95 }

     ul li a:hover .hassubs { background-image: url(“arrow_over.gif”) } /* Hover Styles */
     ul li a:active .hassubs { background-image: url(“arrow.gif”) } /* Hover Styles */
     

     that’s the cdd-part, simply adjust the width/height/padding to your menus width/height/… a bit of trial and error 😀

     in your html-code you need to do this:
     Services

     a simple paragraph, note that is important that the

     -tag is nested inside the -tag as it postion is relative to it!

     Mathijs

123. Is a nice idea, and many tutorials claim them to be very necessary, but if you look at the real user agents out there, you realise quite fast that providing them might be useless to the people who REALLY need them.

     http://www.wats.ca/articles/accesskeys/19

     is a nice article about them, and the problems we are having (shortcuts already been used for other things in the app).

     http://www.joeclark.org/book/sashay/serialization/Chapter08.html
     also explains some of the issues, and wondered some years ago when the browser support will get better 😉

124. [Mathijs]…when you’ve got several

     ‘s on your site, only the first will work in IE and all the other won’t. So I addepted the js-file a little…

     The “id” attribute, as it was mentioned here before, is a unique identifier. It is not supposed to be repeated within one document. It will give you bad karma and seven years of bad luck (and that just a best case scenario).
     You can give your

     s a class, though, and do it as many times as you wish. Then look for it like this:
     …
     if (collUL[j].className.indexOf(‘nav’)!=-1)
     …

125. is a bad tool to check for classnames, as it will also work if I have another class on it (elements can have more than one class) with “nav” as the name of it. Better to use RegExp:

     function checkClass(o,c)
     {
     var re=new RegExp(’\b’+c+’\b’);
     return re.test(o.className);
     }

     o is the object to check, c is the class name.
     returns true or false.

126. Peter and Nick, thanks for replying, both of your ideas worked fine for Mozilla, but I was having trouble getting it to work properly in IE6. Then I (finally) found out what I was doing wrong. Here’s an abbreviated form of my final stylesheet:

     #nav, #nav ul { }
     #nav li { }
     #nav li ul { }
     #nav li a { }

     /* Fix IE. Hide from IE Mac */
     * html #nav li { }
     * html #nav li a { }
     /* End */

     #nav li a:hover { }
     #nav li ul li a { }
     #nav li:hover ul, #nav li.over ul { }

     Note that the first line applies Peter’s solution. Now note the last line. I had to repeat the “#nav” after the comma for it to work in IE6.

     Working example located here:

     http://www.jhvj.com/test_dhtml.html

     Thanks for both the article and the help. Hope to see more good articles from ALA in the future 🙂

127. [Chris]..is a bad tool to check for classnames, as it will also work if I have another class on it (elements can have more than one class) with “nav” as the name of it…

     Not following… do you mean

     ?

     collUL[j].className.indexOf(‘nav’) will find all elements, which have ‘nav’ in a class name, regardless of how many different classes are applied to them.
     It will, however, also find elements (if there are any) with class names like ‘navlink’ and ‘navbar’.

     Your RegExp should also return true on all elements with class=”nav”, class=”nav and whatever else”, etc.
     It will skip ‘navlink’s and ‘navbar’s, though, so it is more precize.

     That I agree with wholeheartedly.

128. A fix for the tag overlap problem in IE|Win (based on the earlier entries in this discussion), multi-level vertical menu:

     http://www.gerasimenko.com/domstudies.html

     IE6.0.2 Win | Firefox0.9 Win | Safari1.2 OSX

129. Great article. I look forward to the point when we won’t have to use JavaScript at all.

130. It seem to me a little complicated due to incopatibilities in browsers.

131. Sorry if this has been said, but 13 pages of feedback is too much to wade thru.

     My 2cents is, a LI immediately followed by a UL is only (in structural terms) conincidental. There is no real tie b/w the two.

     Why not say, a LI can only list an anchor. I.e. it is a leave node in the menu. Simpler … yes?

     But, a DT (again in structural terms) always pairs with a DD. Make the DT a “submenu name” and the DD a “submenu definition”. Then, naturally, the DD would own a lot of leave nodes and maybe more submenus.

     This would more closely model the most common resource file structures (Win/X/Mac/OS2/etc…) and, IMHO, make the menu a little more structured (there’s that word again!).

     Plus (and not a small plus), the CSS changes from:

     li > ul { … }

     to:

     dt { … }
     (or dl, dd, whatever)

     The former, however prefered, is not supported in the “market share” browser. But the latter would be interpreted correctly in all browsers. And maybe a little bit of the hacking can be deleted (alas not ALL the hacking).

     What say you?
     —
     iwanttokeepanon

132. I’m a newbie, so maybe this is obvious to everyone else, but when I put this menu in a left div, the submenus are mostly hidden behind the right div.

     What am I missing?

     Thanks!

133. I been messing around with the css, but I can’t figure out how to make a horizontal version of this. Does anyone know how to do this?

134. mwylde, check out http://www.alistapart.com/articles/dropdowns/ for how to make a horizontal dropdown menu. You can see a working example of this at http://www.htmldog.com/articles/suckerfish/example/.

135. I’m relatively new to using CSS. I use Blogger with my site, and I was hoping on installing this menu to my site. I had some troubles, but eventually everything began to work perfectly. I had to edit a few other ul’s and li’s from things on my site using them already, but I got the menu working.

     But then I came to a problem with the other parts of my site using the li and ul tags. I narrowed the problem down to the Holly Hack that had to be used for IE.

     Is there any way that you can set up the Holly Hack so it only effects specific ul and li tags with a specific class? In this case, the class I used for the drop-down menu was called navigation.

     Any help is greatly appreciated.

136. That is!
     DL/DD works better than UL/LI,
     ‘list-style: none;’ drops,
     and DD looks identical in all browsers.
     (It seems that MSIE renders wrong UL/LI ‘padding’ and/or ‘margin’ with ‘list-style: none;’ ?!?!)

     I think that DL/DD is better.

137. I’ve been studying this for way too long…

     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

     I’d like to Nate’s (http://alistapart.com/discuss/horizdropdowns/9/#c8763) example of using an arrow in place of invisible sub menus. I think I get what he’s saying, but in my mind it’s impossible without some nasty javascript.

     I mean, how else could you replace an entire

     with an ? Plus, everything BUT the would have to be invisible, right? Really, wouldn’t Chuck B.’s (http://alistapart.com/discuss/horizdropdowns/8/#c8754) use of classes be easier to maintain?

     C’mon, Nate: give us a URI!

     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

     Chris (http://alistapart.com/discuss/horizdropdowns/9/#c8757) brought up an excellent issue about display:none not being visible to screen readers. Why not use visibility:hidden instead?

     The Suckerfish method /is/ different. It does a lot of complex stuff with float styling which keeps submenus visible to screen readers. If what I’m suggesting works, then the Rigby method maintains the section 508 compliance of Suckerfish sans some of the complexity (for menus with only one sublevel).

     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

     Peter (http://alistapart.com/discuss/horizdropdowns/12/#c8802) addressed a lot of issues in theory, but his code isn’t working for me, and I was wondering if anyone else had success with it?

     In “keeping the top menu highlighted”:

     ul li:hover, ul li.over {
     background-color: #000;
     color: #FFF; }

     Every attempt I’ve made to style inside the

     • has failed. I think you must style inside the .

       Also, the pseudocode above is redundant. All

     • s occur within
       s, so you can drop the
       . In a case like this,
       is only meaning when used at least twice: “ul ul li.”

       This same flawed reasoning affects Peter’s explanation about “sub-sub menus.” I’d really like a solution to this, because I want to build a menu that nests four levels deep.

       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       As for the

       talk on page 14 (http://alistapart.com/discuss/horizdropdowns/14/#c8817) (http://alistapart.com/discuss/horizdropdowns/14/#c8829):

       To quote Chris (http://alistapart.com/discuss/horizdropdowns/8/#c8752):

       “If you separate accessibility from usability then you are in for a rude awakening when you really have to work for users with accessibility needs.”

       s are for lists of definitions. Menus are not lists of definitions. Imagine being blind and running across a menu that your screen reader treated like a list of definitions.

       I found out about thanks to a book by Zeldman (so I’ve already shown my gratitude by paying the man). He does a lot of preaching when it comes to X/HTML structure, both in print and on this (his) site. One of his sermons, to paraphrase, is that tags should be used for their intended purposes. I’m no acolyte, but he has his points.

138. I’m not sure if this has been asked or answered before; I don’t really have the patience to sift through 13 pages of comments. I’ve been trying to get multiple menus onto one page. I need six in total. Now, with Firefox it appears that having multiple drop-down menus will work with the current CSS and JS, but it doesn’t work in IE. Is there a different JS I should be using to allow IE to acknowledge the second menu?

     What I mean by this is that I have six sets of images seperated and I want them all to have the drop-down menus. Now, I tried leaving the original

     tag open (if that makes sense), creating the code for all six sets and then closing the

     tag, but that only led to more problems — IE would jumble the positions of the images. When I say “jumble”, I mean “how in the hell did it move from the bottom of the page to the top” jumbling. If I close the

     tag off and start a new one for each set of images, then only the very first drop-down menu is functional in IE.

     I would greatly appreciate any help. Thanks in advance.

139. I’ve tested this out and it does work with a few caveats.

     To accomplish this I created a second complete menu with its own base UL and assigned a DIFFERENT id to it than the first menu. You then edit the .js file to assign the IE workaround to the LI tags of both menu ids.

     Here’s the rub though, if the pull down items from menu 1 go on top of menu 2 then the behavior of menu 2 will take effect and mess up the display.

     You can see an example here:

     http://www.frinc.com/personal/charles/cssmenu/index3.htm

140. we must rewrite the onload event, maybe we have another script that uses the onload event and it becomes rewrite and some scripts can give error.

     for example…

141. Thanks, Charles. Now it all seems so simple. I didn’t realize assigning a different ID would work… probably because I didn’t edit the JS properly when I tried it. Thanks again, you’re a big help.

142. Okay, I’m having problems again. Having seperate ID works for Firefox, but of course, IE won’t accept it. Here’s a link to a textfile that contains the JS and CSS I’m using.

     http://shameless.allwoundup.net/js_and_css.txt

     Could someone explain to me what I’m doing wrong now?

143. Err, okay, that was a bad idea… txt files in browsers don’t work too well. But I’m sure you’ve all thought to just open it in Notepad or something.

144. Carl,

     I took a look at your JavaScript file and I think you are using a mix of my JavaScript and the one that Nick originally included with his article. The difference is that my Javascript uses a recursive routine called AssignMenuEvents() and Nick’s does not.

     So in your example you are calling my function but you have it in Nick’s code, which doesn’t have that function defined. Just take my whole JavaScript and replace “nav” and “nav2” with your menu ids:

     function StartList()
     {
     if (document.all && document.getElementById)
     {
     var node = document.getElementById(”nav”);
     var node2 = document.getElementById(”nav2″);

     AssignMenuEvents(node) ;
     AssignMenuEvents(node2) ;
     }
     }

     function AssignMenuEvents(pObject)
     {
     var node ;
     var vPreviousIndex ;

     for (i=0; i < pObject.childNodes.length; i++)
     {
     node = pObject.childNodes[i];

     if (node.tagName == “LI”)
     {
     node.onmouseover=function()
     {
     this.className+=” over”;
     }

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

     if (node.childNodes.length > 0)
     {
     vPreviousIndex = i ;
     AssignMenuEvents(node);
     i = vPreviousIndex ;
     }
     }
     }

145. Sorry the “theory” didn’t work out for you! My intent was to describe *how* these things work to aid peoples understanding rather than just post *completed* solutions. I have since tested and got the following examples (links at the bottom of this post):

     **Highlighting Menus**
     My CSS and theory here were fine, but I neglected to mention two things:

     1). You need to remove the background rule from the CSS for “ul li a”, e.g. make it look like this:

     ul li a {
     display: block;
     text-decoration: none;
     color: #777;
     /* background: #fff; */
     padding: 5px;
     border: 1px solid #ccc;
     border-bottom: 0;
     }

     2). The JavaScript being used should be replaced with newer SuckerFish code. This newer code applies “onmouseover” and “onmouseout” events to *all* LI’s in the menu rather than just the top level of the hierarchy.

     With both the above done, the menu should have a highlighted item on each level of the menu.

     I have tested this in Firefox 0.9 and IE6 and they work. The original article mentioned problems in IE6 with not having a background colour, so this *may* create other problems which you’ll have to sort out for yourself! 🙂
     You could for example leave the background colour in place but make the highlighting rules !important. But different vintages of MSIE have problems with !important…. and so the can of worms continues!

     **Nested Sub-menus**
     The sub-menu CSS rules were nearly correct. The theory was fine; it was merely the practice that was flawed!

     Again, the newer SuckerFish JavaScript is needed to make this work.

     The CSS for the 2nd menu level should read:

     li:hover ul ul, li.over ul ul {
     display: none;
     }

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

     The first rule was fine, but the second rule needed an extra UL at the start.

     **Examples**
     I have three example pages. The first is the original code as per the article. The second has the JavaScript updated and the highlighting rule in place. The third has a nested menu (its under About->History) in addition to the highlighting rule. Enjoy:

     1. http://clickindustrial.com/test/public/2004-07-12/original.html

     2. http://clickindustrial.com/test/public/2004-07-12/highlight.html

     3. http://clickindustrial.com/test/public/2004-07-12/nested.html

146. Thanks for cleaning that part up, Charles. Once again, it still doesn’t appear to work on IE. I actually changed the menu IDs to “nav” and “nav2” and while it works without any problems in Firefox, IE doesn’t recognize either menu. Is there anything else I should be aware of that might fix this problem?

     This wouldn’t be a problem if no one used that inferior browser.

147. I use IE 6.0 on WinXP pro.

     I have found that if you put a space after the link text and before the closing a it stacks nice and neat.

     example:

     Home

     About

     should be:

     Home

     About

     Gotta love IE…

148. Carl,

     You have to call the StartList function from the body tag <body onload=StartList();>

     Maybe you can post a link to your test site so I can take a closer look?

149. That did the trick. Thank you very much, Charles. You don’t have to waste your time examining my code, the menus work fine on both IE and Firefox now. I really needed this to work — not being able to complete the index page was really impeding my progress — so you’re a big help. Thanks again.

150. You can stack several functions in one onload event thus:

     window.onload=function(){
     funcion1();
     function2();
     }

     You can also use a clever addEvent function, but they are not 100% cross-browser:

     http://www.scottandrew.com/weblog/articles/cbs-events

151. Having created my first CSS layout based site, these menus looked to be the perfect answer to my problem and I managed to get them working first time.

     However, when I try to use list elements anywhere else on my site, they automatically inherit the attributes of the menu, I understand why but despite reading everything I can get my hands on, I’m at a loss as to how to then revert to normal list formatting for my other lists. Any suggestions on a resolution would be fantastic as I’m a little lost despite numberous attempts to fix.

152. edit your css and add the id of your base menu before all of the UL LI classes in the following manner:

     #nav ul
     {
     …
     }

     Or use a explicit class name that you assign to your menu like so:

     .MenuBar u
     {
     …
     }

     I chose the second method. See my css by linking to my site by clicking on my name above.

153. That was supposed to be

     .MenuBar ul
     {
     …
     }

154. I could not tell where the additional code should be added when improving the lists.

     Also, for the “thing” to be useful I need to know what is in the .js file.

     So it does not work for me and I cannot use it.

     Or have I missed something?

     Barry Hooper

155. Has anyone else noticed that this still doesn’t work properly in IE 5.2 on the Mac?

156. This is the code i have for my menu :

     the problem im having is figuring out how to change the text colour when an object is highlighted, at the moment it stays orange i would like for it to be white when its in the hoverstate

157. I was searching for a horizontal menu for about a week.I did find them on the other sites but its was difficulty to study the menu.Sometimes I just thought of just inserting all the links separate. But when I found this one its was the simplest of all, thanks a lots.Because Now I can make my own menu with your help CHEERS.

158. This trick works perfectly for me, but I don’t understand why.

     The magic:
     li:hover ul, li.over ul {
     display: block; }

     I see how this opens the menu when the pointer moves into the

     element. What I don’t understand is how the menu stays open. The way I understand it, it should close when the pointer leaves the

     element (as it won’t be :hovering any more), but it stays open while the mouse pointer in in the

     element.

     Sorry if I’m missing the obvious.

159. I am working on a redesign for my site and i have the menu working but when there are spaces in between the expansions IE wont allow you to go to the next one. Also it seems hard to hover to the expansion but maybe thats just me.

     the link is: http://css.eternalfireproof.com

     It works fine in FireFox except it seems hard to hover to the expansion.

160. I noticed at the end of the article:

     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.

     but I tired adding a bg to li a and it still didnt work.

     you can see my stylesheet here:
     http://css.eternalfireproof.com/css/eternal_layout.css

161. Everett,

     I don’t have an example url, but I can try and remember the CSS I had working…

     basically instead of having the nested ul hidden, you use a CSS image replacement technique (http://www.mezzoblue.com/tests/revised-image-replacement/)

     example:

     #nav li ul {
     position: absolute;
     top: 0px;
     right: 0px;
     text-indent: -2000px;
     width: 10px;
     height: 100%;
     background: url(arrow.gif) no-repeat center right;
     }
     /* You also need to hide the nested li’s for safety */
     #nav li ul li {
     display: none;
     }

     Then declare the hover state:

     #nav li:hover ul {
     display: block;
     position: absolute;
     top: 0px;
     left: 140px;
     }
     /* Unhide the li’s */
     #nav li:hover ul li {
     display: block;
     }

     That’s just the general gist of it… Little subnav arrows without the hassle of having to touch the mark-up. I can’t remember what happend with my little Proof of Concept example, but I do know that it worked quite nicely in Firefox, but can’t vouch for the other browsers. If you really want me to, I can recreate it… Any other questions, fire away.

162. Ah: you hide the

     s when the arrow is showing! I get you now, Nate.

     A few things keep me from putting theory into practice, though. (Foremost being that this whole dropdown technique fails in Netscape 6.) But also, the arrows would disappear as soon as you roll over. And if the text in any of your

     s wraps around, the vertical alignment of the arrows is all over the place.

163. In reviewing the JavaScript code it occurred to me that for every UL menu there was a parent LI for an actuator and I came up with this streamlined code. The improvement above is good, but it ignores that the idea was to use the accessible structure of the nested lists. In other words, it goes further than necessary with the tag parameter. However, I do like the addition of the hoverClass parameter.

     startList = function() {
     if (document.all&&document.getElementById) {
     var menus = document.getElementById(”nav”).getElementsByTagName(”ul”);
     for (i = 0; menus[i]; i++) {
     menus[i].parentNode.onmouseover = function() {
     this.className += ” over”;
     }
     menus[i].parentNode.onmouseout = function() {
     this.className = this.className.replace(” over”, “”);
     }

     }
     }
     }
     window.onload=startList;

164. I am including 2 external javascript files. One is your drop_down.js file and the other is to run the countdown clock. Only one of them works at a time. I cannot figure out how to get both of them to work together. Any thoughts.

165. Hi, I don’t know if this is my fault or not, but when I tried to validate the JS code..I get many erors (sixs errors)…I don’t know how to fix them…any help 🙂

     and beside, when I declared my homepage to an XHTML 1.0 trans…the menu that I had put, isn’t working right, see it for your self to understand… 🙂

     http://w1.409.telia.com/~u40934249/fall.html

     and thnx for the code of the menu, really helped me, I am newb at CSS and the internet, but it really gave me a new way to look at weddevelopment, my past few homepages, was made in tables, so I had the old method to think…and I thnk you for this help 🙂

     thnx =)

166. I slightly altered the above script to accommodate some images as well. Works as planned in all browsers with the exception of IE for the Mac. Any ideas? Any input would be much appreciated.

     http://home.comcast.net/~afletch/menu/template.htm

167. I slightly altered the above script to accommodate some images as well. Works as planned in all browsers with the exception of IE for the Mac. Any ideas? Any input would be much appreciated.

     http://home.comcast.net/~afletch/menu/template.htm

168. http://www.alistapart.com/d/horizdropdowns/horizontal2.htm
     works perfectly in IE6 and Mozilla
     but when I save the file to my HDD, it stops working in Mozilla.. I get the top-level in 2 rows -> Row 1 is Home & About; row 2 is Services and Contact Us. The drop-down works but the links appear far away.

     It works in Mozilla if you remove the FLOAT:LEFT; from
     HTML UL LI {}
     But that gives a 1px height increase in IE.

     Any work-around???

169. All is beautiful, with the help of this, I’ve just killed 60kb off my nav (yes it was that bad and it was tables). However, its on a site with a LOT of images and they all obviously need to load before it starts working. Is there a way to avoid the onload and still get it to work?

170. Cudos to Nick Rigby on a lovely tutorial. Lovely! Now a question for you all:

     By sliding the menu into a div {position: fixed;} I have successfully nailed my navigation to a certain corner of the screen. Sadly IE does not support fixed positioning, as you well know.

     To absolve the problem I have implemented the following (common) solution: body {overflow: hidden;} div.content {height: 100%; overflow: auto;} –Effectively leaving absolutely-positioned elements (so long as they are rendered outside the content div) ‘fixed’ to the screen.

     Now for the trauma! I’ll bet you can guess what’s coming. When the menu is rendered outside

     in this fashion, the li ul {position: absolute; is treated as follows: li ul {position: fixed;} . . .effectively destroying the menu.

     I do hope there is a brain out there that is capable of concocting some sweet solution to my dilemma, because It certainly isn’t mine. ~fin

     Why can’t all browers be Safari and Firefox?

171. HI
     I see this was recently asked…anyone tried it–having 2 levels of sub menues…??
     And if so how did you do it?
     Thanks
     Suzanne

172. Is it possible to have another submenu a level deeper?

173. Hmmm, I just realised the person before me posted the same request. On a side note, I think it would be good to create a different way to organise comments so they follow-up. Maybe in the next version?

     Thanks for sharing all the knowledge.

174. I would like to limit the “ul”, “li” and other tags, including “hmtl”, etc to just the navigation. How to achieve it?

     I can’t use div or class tags individually to every list item because it is created dymically. I only have one enclosing “ul” tag to work with. ie: <ul><?php wp_list_cats(); ?></ul>

     The PHP between the “ul” tags will generate list items enclosed with

     tags

175. In this tutorial, where do I place the javascript code? In my html file? My css file? I’ve never used javascript yet.

     If anyone’s got a quick answer for me, that would be much appreciated. Thanks.

176. After much experimentation to determine why this clever technique fails in Netscape 6 (Win), I’ve learned that while Netscape 6 does indeed implement the :hover pseudo class on all elements, it only works on these elements’ _backgrounds._ Bizarre.

     So, in a bare bones example like this (pardon the non-standard code):

     Test

     you will notice a change only when the mouse is /next/ to the text, but never when it is /over/ the text.

     In the CSS dropdowns, s are styled as block elements whose dimensions occupy the entire

     that contains them. Consequently, there is no

     background to hover over, and nothing happens in Netscape 6.

     My solution to this is so obvious in retrospect that I just know one of you reading this knew what to do and were too lazy to help me (and others) out. To those persons, I offer the offensive gesture of their choosing (hooray for the democratic process).

     Anyhow, the answer: kill the IE/Win filter and use the sfHover class on EVERYthing. In simple terms, get rid of this IF-statement:

     if (document.all&&document.getElementById)

     –but leave the code inside it, of course. If you’re using the new Suckerfish code <http://www.htmldog.com/articles/suckerfish/dropdowns/>, change this:

     if ( window.attachEvent )
     window.attachEvent(“onload”, sfHover);

     to this:

     window.onload = sfHover;

     This is a crude solution for obvious reasons. Instead of using standards first and “browser sniffing” for the special cases, I’m letting one browser dictate a non-standard technique for everybody. It’s, like, software affirmative action. (Hey, it’s okay–I’m black, so I can say that.) All that valid :hover styling becomes completely useless.

     But hopefully, now that I’ve pinpointed the cause, someone more skilled in the subtleties of DOM script compatibility can find an elegant “browser sniffing” solution, eh?

177. It’s all about the cascade, Q-Boyd m’man. Replace your styles with this temporarily,

     as I explain:

     #nav li:hover ul, #nav li.over ul { color:orange; }
     #nav li:hover a, #nav li.over ul a { color:orange; }
     a {text-decoration:none;color:transparent}

     With submenus, a

     contains a

     . This

     is /inside/ of that
     • . So,

       whether you’re hovering over an inside the

     • or a
       inside the
       • , you

         are nevertheless _inside_ the list. (Remember, the is the block element here; the

       • is just some non-visual container surrounding it.) I find it easier to follow

         this relationship in a typical, bulleted list format, like the styles above.

         In the CSS dropdowns, the submenu

         s are initially “invisible” (or not displayed,

         or off screen, or whatever you want to call them). Well, the moment you hover over a

         • , you trigger a style that dictates any
           inside it to become “visible.” Now

           that the submenu is “visible,” if you move your mouse around inside it, you’re still

           in the

           • , so it stays “visible.”

             A third way of saying this is that the

           • ‘s styles _cascade_ down into the
             .

             A fourth way is to look at this from the

             ‘s perspective and say “if your mouse is

             over me (and this can only happen if I’m visible) then make me visible.” Geeky

             programmers call this “recursion.”

             (okay. i’m gonna stop now.)

178. >the problem im having is figuring out how to
     >change the text colour when an object is
     >highlighted, at the moment it stays orange i
     >would like for it to be white when its in
     >the hoverstate

     All the menu “boxes” are s, so you change the way these boxes look using s’ :hover pseudo-class.

     #nav li a:hover {color: white}

179. About the hover states:

     Don’t use them on list-objects for now (only to open up a child i guess)

     You can esaily give the li-object a fixed width and/or height, set the overflow to hidden and give the li-elements childs (a-element) a padding.
     When you set the hover states of the anchors to change background, … instead of the list-elements, you can easily achieve such a hover state.

     I think there’s an article somewhere discussing this, it’s called taming lists (or it was the one before that)

     This method doens’t help you in having a drop- down menu, but it solves the hover-state problem…

     Mathijs

180. The web page in which these two menus exist seem to load only the swapclass menu script not the ‘startList’for the drop-down to work properly. Any help would be greatly appreciated.
     Thanks
     Rachid

181. I liked this article and decided to use it. I ran into a few problems that I hope someone could help me out with.
     http://www.synergyprints.com/temp2.htm
     (“cards” button)

     1. as you can see I put in a javaScript code so that the TD would change colors when mouse overed. on my mozilla browser, it doesn’t work anymore and on IE it works but it leaves a stripe. How can I fix this and how can I do the same color change for the sub menu?

     2. on IE, the submenu doesn’t disappear when you mouse out. how can I fix this?

182. Here is the script I used for the alternative drop-down menu as found on this site http://www.jhvj.com/test_dhtml.html
     and the OnLoad in body tag refers to PVIIswapclass script that collapses all menus when pages loads.
     I just couldn’t get the javascript for the drop-down menu to load.
     Please see script below:
     <script type=”text/javascript”>
     startList = function() {
     if (document.all&&document.getElementById) {
     navRoot = document.getElementById(”nav”);
     for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName==”LI”) {
     node.onmouseover=function() {
     this.className+=” over”;
     }
     node.onmouseout=function() {
     this.className=this.className.replace(” over”, “”);
     }
     }
     }
     }
     loaded = true;
     }
     window.onload=startList;
     </script>
     <body bgcolor=”#ffffff” onload=”P7_swapClass(0,’none’,’open’,’closed’,’li’)”>

     Any help would be greatly appreciated.
     Thanks
     Rachid

183. http://www.appliedcom.net/new_print/test/

     This article is beautiful. So so clean. I used it to make a horizontal menu. Check it out.

184. Added to stylesheet
     ul.square
     {
     list-style-type: square
     }
     I need additional lists in the content of the page. It caused the menu to have a clear background where ever there is overlap and the class ul.square does not use attributes at all. Help. Sorry if this is already addressed in discuss. See page http://www.vinevolunteers.com/prorose.htm

185. Quite nicely written, but when i implemented this style of menu ages ago i never found i needed the 1% height trick for IE.

     http://www.readmetoo.co.uk has a version of this menu that is infinately expandable (well in theory anyway, if it went off the end of the page then you’d have to scroll and loose the mouseover)

     It doesn’t have the IE JS hacks because i dont like IE, and it’s my site so meh. The best way to make people switch to ff et al is to give them a working site but tell them to get a better browser if they want the full featured version imo.

186. ok i am feeling rather dumb right now i do not know how to put the code together…the first coed they give u that is just the basic list is a bout as far as i get cuz i dont know where to put the rest of the codes can someone please help me out

187. I’ve been working on a friends website, attempting to convert his existing horizontal menus to the format. However I’ve run into what appears to be a bit of a z-index problem on the IE browser. I’m using the example code from the article, almost verbatim, the primary change I’ve made is that I’m not rendering the sub UL elements fully at the right edge of the top level menu. Instead the sub menu is being rendered in the middle of the parent. This is working as intended, the problem I’m seeing, is that the borders of the parent LI elements are being rendered _above_ the sub menu.

     I’ve tried to increase the z-index value of the submenu to push it above the borders, but that doesn’t seem to change anything. I’m wondering if anyone else has attempted this, or if, perhaps, anyone has a solution idea or suggestions?

188. i’m a beginer, and need some help.

     i can get the dropdown to work fine on IE mac and safari, but things turn to ass on a pc.

     someone help me please…

     site is at http://www.dsjdesign.com/owfi/product.html

     thanks

     david

189. Here is a solution to get rid of the javascript yet allow for IE to work.

     I use a htc-file which is a IE only feature to enable behaviors to css elements.

     Make a file called hover.htc with this content:

     In the css-file add this line:
     li {behavior:url(hover.htc)}

     Remove that javascript stuff to fix for IE compatibility.

     Voilà! That’s it. Now you have a nice non-javascript solution to the IE compatibility problem.

190. I don’t know if this article is still active, but I have a few concerns.

     I’m redesigning the admission page for University of Wisconsin, Platteville, and I noticed a few things:

     the rollovers don’t appear in Netscape 6 or Opera 6.03, and I’m wondering if there’s some way to fix this?

     Also, the way that I have it set up, there’s a ten pixel space inbetween the link and the dropdown menu. As we all know, the :hover attribute only works when you’re hovering over your link. I’m currently searching for a way to delay the closing of the dropdown menu. Is this at all possible?

191. This doesn’t seem to work in netscape 6. I haven’t tested it in many browsers but it definitely wasn’t working in netscape 6 although it works in 7.

192. I’ve downloaded the latest Netscape and the script won’t work. Is it a problem with the script or with Netscape?

     thx

     Joe

193. when i mouse over the menu nothing happens there may be an error in the javascript put its exactly the same as it is on here please someone help email me

194. nevermind

195. Hello all…

     Just wanted to say that these menus are great.
     Just a smidgen of JavaScript to kickstart the show and leave the rest up to the marvel that is CSS.

     I will never code menu the old way again.

     Well done.

196. I’ve seen CSS menus like this before and I want to make use of them, but javascript menus just seem to be more stable. On the CSS menus the submenus on the tree – especially if you have a second submenu – seem to disappear really quickly after the cursor moves out, so – although I know they aren’t unstable per se they appear unstable. Compare this menu I use (taken from some javascript site) : http://resources.cheers-sendai.com with the CSS menu in the example. Do you see what I mean?
     Is there anyway to replicate the javascript menu more closely?

197. I’m trying this out on a site I am rebuilding and like it a lot. But examples that include more than the code discussed in the text are confusing. I don’t know more than the basics of JavaScript. What is the extra JavaScript at the beginning and end when I view source on the example page?

198. I have a need to put 2 or 3 different of these “dropdown” menus on a single page.

     I tried a lot of stuff, but can’t get more than 1 to work properly.

     Can anybody tell me how to do this?

199. You need to give each

     a unique id and then update the javascript so that it adds an over function for each one.

200. Thanks for the menu script!
     Just have a slight problem.
     The sub menus do not retract when I roll off them. They stay on the screen, so after I roll over all of them, they are all still visible on screen.
     How do I fix this?
     Thanks!

201. Jason said:

     [to get 2 or 3 different of these “dropdown” menus on a single page to work]

     “You need to give each

     a unique id and then update the javascript so that it adds an over function for each one.”

     Easier said than done… any chance you can provide a sample of the modifed JS and bulleted list?

     Wouldn’t you also have to update the CSS for this 2nd id?

202. I concurr.
     Actuall, I prefer external files in examples, however more along the lines of http://www.bluerobot.com/web/layouts/ which includes the external CSS file.

203. Sorry to ask again, but I’m not a good enough programmer to understand Jason’s answer..

     I have a need to put 2 or 3 different of these “dropdown” menus on a single page.

     I tried a lot of stuff, but can’t get more than 1 to work properly.

     Can anybody provide a sample of how to do this?

204. The article is Really Good… Gonna use it in my website http://www.rolex-replica.net , is there any way to have a similar horizontal menu ????

205. Is there anything you have to do to get it to work with Netscape 7.0?

206. Here’s for people looking for an example of putting multiple menus on the page.

     http://www.frinc.com/personal/charles/cssmenu/index3.htm

207. Another good thing about these menu’s is that their are Search Engine Friendly 🙂 .. I have hearly come across menu’s that are SE Friendly..

208. thanks to all who have contributed to this article – i found it very useful.

     however, I must admit i got lost along the way with all the suggestions/fixes.

     Has the original document reflected these suggestions? If not, why not?

     again, cheers

209. I would like to place two dropdowns on the same page. I found this code in one of the reply’s:

     function fnSetHoverClass(parentID, tag,_ hoverClass) {
     var el = document.getElementById(parentID);
     if (el) {
     el = el.getElementsByTagName(tag);
     for (var i=0; i < el.length; i++) {
     el[i].onmouseover = function()_ {this.className += ” “+ hoverClass;}
     el[i].onmouseout = function()_ {this.className = this.className.replace_(new RegExp(” “+ hoverClass +”\b”), “”);}
     }
     }
     }

     But how do I use this? Could someone explain this to me, the javascript aint my best side ;)

210. This is the best article i read yet.i wanna ask you something which may be very stupid for you but its very important for me.I wanna know whatever you have written in your article, should i save them as a CSS file or i should have to simply write those codes into my final code.
     Suppose i have written a simple code for menu creation …then i wanna beutify it as you described .So where should i have to use the modified code….. like this one

     ul li a {
     display: block;
     text-decoration: none;
     color: #777;
     background: #fff;
     padding: 5px;
     border: 1px solid #ccc;
     border-bottom: 0;
     }
     please be specific. i am a new bie in thie area so don’t know so much.I apologize for my idiotic question.If you have some spare time thenplease reply me

211. How do I modify this code to go across the top of my page? Currently the items are listed vertically with the sub menus shooting out horizontially…I need them to do the opposite…listed horizontially and shoot down vertically. Anyone…PLEASE!!

     Gracias…in advance…

212. hi jenee

     i do not want to sound rude, but this is indeed a very fundamental thing you should know.

     if you do not know where to put this, you havent even started your first steps of web development. You should please make every effort to learn these basics yourself.

     may i suggest checking out a site like http://www.w3schools.com?

     good luck, and welcome

213. Where do you put the codes?!!? It simply says “once you’re done making the basic list, put this code”
     Like where the hell am I supposed to put it?

214. Hey Ashley,

     In the Javascript in the example there’s a line that looks like this:

     this.className=this.className.replace»
     (” over”, “”);

     You should delete the » after replace so it looks like this:

     .replace(” over”, “”);

     It should work after that. It’s just the line wrap symbol that the editors use. Delete it and unwrap the line and the code should work fine.

     Failing that, you can save the .js file from there example to disk by clicking here:
     http://alistapart.com/d/horizdropdowns/drop_down.js

     Good luck!

     Ben

215. Great code. Thanks for putting it out there. Along with Elizabeth J. I’m wondering how to make the menu horizontal with dropdowns. Anyone have ideas on how to do this or should we use the Suckerfish coding? Thanks.

216. the only way to get a keyboard navigation is to make an alternate stylesheet, for people who cannot operate a pointer to switch to, true?

     peter

217. I think some people have missed the point here, this isn’t some sort of forum where you can post a question to help you out…
     About the horizontal thing:
     OF COURSE YOU SHOULD USE THE SUCKERFISCH EXAMPLE!
     This article is a re-write of that one, so it’s rather logical not?

     About the keyboard navigation: not true,
     you can use an acceskey-property and change the stylesheet to :active or anything else that suits you… As discussed before this technique isn’t really that user friendly…

     Mathijsken

218. hi all

     I have tried using this menu with the Faux Columns, but have had no luck.

     My nav col is on the left, and im using the above menus. When I mouse over and the menu dynamically expands, it is containted/restrained to the navigation div.

     Can someone please suggest a way to get the popout menu to display above both the nav column (this is not a problem) AND the content column (this IS the problem)?

     many thanks

219. I am currently in the process of adapting this great example into an inline, multi-level nav bar.

     The question: Is it possible for the subs to display as block in response to A:active? ‘active’ seems like such an overlooked / underused attribute. I like it. I simply don’t know enough about how it fires in response to mouse clicks.

220. Great article! But, when people asked questions answers were not forthcoming. As a matter of fact, two people were a

     bit rude with one being downright sarcastic. And, as usual with a few self-proclaimed genuis techie programmers

     incomplete, non-functioning and platform specific examples were offered — BUT nobody has answered some of the simple

     questions because they think we were “stupid” for asking.

     I’m sure you will ban my IP address for telling you all this and if that’s the action taken… fine. I moderate a

     number of forums (not having to do specifically with web design and programming) and as a moderator, I would have

     repremanded the people make the rude posts. AND, as a moderator on an open forum (if I knew an answer to a question) I

     would most certainly answer it.

     The following people were rude and sarcastic:

     RUDE
     response to : new bie | by jenee | by jack
     12 August 2004 @ 10:04pm
     i do not want to sound rude, but this is indeed a very fundamental thing you should know.

     if you do not know where to put this, you havent even started your first steps of web development. You should please

     make every effort to learn these basics yourself.

     may i suggest checking out a site like http://www.w3schools.com?

     SARCASTIC
     Oh my god… | by Mathijs Dumon
     19 August 2004 @ 4:13am
     I think some people have missed the point here, this isn’t some sort of forum where you can post a question to help you

     out…About the horizontal thing:
     OF COURSE YOU SHOULD USE THE SUCKERFISCH EXAMPLE!
     This article is a re-write of that one, so it’s rather logical not?
     About the keyboard navigation: not true,
     you can use an acceskey-property and change the stylesheet to :active or anything else that suits you… As discussed

     before this technique isn’t really that user friendly…
     Mathijsken

     JASON AT LEAST TOOK A STAB AT A QUESTION ASKED 4 TIMES!!!!!
     6 August 2004 @ 3:46pm
     Jason said:
     [to get 2 or 3 different of these “dropdown” menus on a single page to work] “You need to give each <ul> a unique id

     and then update the javascript so that it adds an over function for each one.”

     NOW, CAN ANYBODY ANSWER THE SIMPLE QUESTION: Based on the ORIGINAL CODE OFFERED, HOW EXACTLY WOULD THE FOLLOWING

     JAVASCRIPT LOOK TO SUPPORT 2 SEPARATE UNORDER LISTS ON ONE PAGE?

     // JavaScript Document

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

221. Jim, I agree, save for the first one you quoted. One really should learn the basics before reading these articles; they are certainly well written, and clear if read in their entirety. w3schools really is helpful.

     Spot on regarding the other two though, I don’t see why anyone gets quite so pissed off over such a subject.

222. Might as well bump my query.

     How could :active be used in this example? So far, I’ve been able to get a sub to appear in Gecko browsers on :active, but it disappears onmouseup. Probably still strictly a javascript thing? Anyone wanna prove me wrong? 🙂

     (I’d love to be wrong on this one!)

223. Hmm, Jim, you might be right…

     the thing is, there are 23 pages on this article, and many of the questions have already been answered (like the multiple dropdowns in one page)

     I apologize if I’ve rude, sarcastic or anything like that…

     I’m a member of a forum too and I’m well aware about netiquette, I guess I sort of lost my nerves…

     Info on :Active :
     a:active MUST come after a:hover in the CSS definition in order to be effective!!
     …
     Adds special style to a selected link (not supported (yet) by NN)
     (W3SCHools)

     Mathijsken

224. I’ve just come accross the same problem as (any suggestions? | by jack 19 August 2004 @ 10:38pm page 22)

     Having read the recent posts this may not infact be the right time to post a question.. but hell.

     I’m working on a page with a graphic menu based on the (brilliant) CSS Sprites code from this site.

     I’ve got a horizontal drop down menu across the top of the page but any menus will not show over the top of the Sprite Menu – its like what happens with divs over lists.

     I’ve just spent a couple of hours fidling with code but no joy.

     Any thoughts anybody ?

     Cheers.

225. This menu doesn’t work in IE6. At first it looks great then once you start hovering the submenus stick around and don’t disappear. To make things worse IE6 on XP w/ SHIT Pack 2 by default blocks your javascript. Why can’t the insane monotanists use a good browser like FireFox?

226. First let me say this tutorial was awesome. It helped me a lot. I was wondering if there is a more elegant way than using tables or absolute positioning to get the menu to align horizontally with vertical drop downs?

227. This article did help me out trememdously too! I’m revamping the horizontal and vertical menus on a website which has multiple instances of both. I used the “behavior” technique of including a *.htc and it works (even IE) fine for all my menus, except that they tend to “blend” into each other, especially when my horizontal menu drops down over a vertical one. Is there another solution besides using z-index property?

     Aside from that, the menus appear correctly over flash objects (with wmode=”transparent”) for IE and FireFox, but not the case for Mozilla 1.6. Is there a way to solve this?

     Thanks a million!

228. the code i’ve implemented for a client, as well as the code here, does not appear to work when using NN6.2+ on a monitor that is not set as your primary monitor. nested ul’s flicker so much that the nav becomes unusable. something to perhaps put in one’s release notes were they to implement similar code for a client.

229. I’ve just built a new horizontal drop-down menu influenced by ALA’s menu. It supports multiple submenus with little modification. Tried to keep it simple.

     Have a look:
     http://www.jarilehtinen.net/jari/archive/dropdown

     It has some performance issues with IE, but with Opera and Mozilla works quite fine.

230. I have tried a variation of this which is fine for both Mozilla & IE. I found that using className to change the CSS attributes leads to some latency (run your cursor fast over a large menu list). Since you have to resort to javascript for IE it appears to be much faster if you manipulate the css via the DOM – if you resort to javascript you might as well admit to use the DOM:
     node.onmouseover=function() {
     //this.className+=” over”;
     this.style.backgroundColor=’aqua’;
     }
     node.onmouseout=function() {
     this.style.backgroundColor=”;
     (Or is the point to leave it slow in the hope that MS fix it?)

231. What do I need as a seperator in the javascript code for more than one menu in the same page? They have all been seperated by divs. (nav1, nav2, nav3) Works fine on one but no go on the other two in iexplorer.

     Thanks!

     I would like three of these and don’t know a wwhole lot about javascript.

     navRoot = document.getElementById(“nav1”);

232. When this is placed in side a container div, it ceases to function. Is there a way to get around this/

     Thans

233. It would be really handy if you gave more details about the IE6 bug. It isn’t clear from the text how you fixed it.

234. I have managed to get the menus working in IE6, however the submenus pop up behind the content of the page. I have tried using z-index to raise the submenu and lower the content (which is in a column absolutely positioned), but to no avail. Not sure what else to try. Works fine in Opera and Firefox, but IE is the most relevant…

     The page is at http://www.no2id.net/ddVersion/

     Any advice would be well appreciated.

235. Fixed it!

     My menu is contained in a column. The submenus should have appeared over the top of the adjacent column, but were appearing underneath that content in IE6.

     I fixed this by adding z-index:1 to the column the menu lives in. Adding the z-index to the menu itself, or any of its parts, did not fix the problem.

236. Careful with that document.all && getElementById check, Opera supports both too.
     In this case it makes no harm, but if you make some serious hacks you could break your site.

237. Can I make a drop-down menu like this but with one sub-submenu?

238. I have added the multiple level menu to a work in progress, and the nav menu forces the whole page down when hovered. Here is sample page.

     http://65.115.104.55/redmond_Demo/index_fluid21.html

     I have tried z-index and position relative but these did not work. Can anyone explain how to fix this menu to work with the rest of the fluid elements. Thank you

239. YADM – yet another dynamic menu
     http://www.onlinetools.org/tools/yadm/

     I made sure that it works in the major browsers and that it is keyboard accessible as well as completely design-able by CSS.

     Have a look, participate.

240. Hi
     these menus don’t work on Netscape 6.
     Anyone find a fix?

     S

241. First, thanks for posting this – I really like the clean look!

     Under IE on Windows everything works fine, yet under IE for Mac each item becomes bold when you hover the item with the mouse. The biggest issue, however, it that moving the mouse over to the submenu the submenu will disappear.

     Any thoughts?

     Thanks,
     Gard

242. I was going to agree with Andrew Hume, it makes more sense.

243. I wish the first level link remains “hover colored” when i scroll in the second level list…
     How can I obtain this?
     Thanks,
     Denis

244. Nice article, but i’m having a problem.

     Everythings fine but in Internet explorer (6)

     The sub menus appear but don’t disappear. So when i put my mouse over all the main menu links i get ALL the sub menus showing at once…

     can anyone explain how to solve this problem?

245. To the drop-down haters: That’s fine, that’s your opinion, but if that’s the case, whey are you here?… IMHO, as long as the drop-down is in ADDITION to normal links through a site, they are fine. They are a shortcut. If they don’t work in a certain browser, that’s fine.

     To the duplicate story folks: If you’re an expert, you don’t need the different approach. If you’re a novice, this second article is quite helpfull.

     To all the whiners: You’ve made the discussion list here almost usless, as it takes forever to sort through your noise and find actual usefull comments.

246. Same thing happened to me. I think there is a error in the javascript. Try using the one in suckerfish sample. (or, here it is ;])

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

247. Hi,

     Javscript that is mentioned in article has “>>” to show the wrapping.

     Remove it and menus will work without any problem.

     hth,
     rajendra

248. Is it possible to display this menu both vertical and horizontal, using just css?
     (see example below)

     • Top1
       • Sub1
       • Sub2
       • Sub3
     • Top2
     • Top3

     Vertical:
     Top1
     Sub1
     Sub2
     Sub3
     Top2
     Top3

     Horizontal:
     Top1 Top2 Top3
     Sub1 Sub2 Sub3

     MJ.

249. i tried usin an IMG src instead of text, but it gives extra space under them.. how can i fix this, also is it possible to grid it? EG,

     MAINMENU> ITEM 1 ITEM 3
     ITEM 2 ITEM 4

     please email me at CAMMO.GARVIE@gmail.com with an answer.

250. Wow.. Exceptional article. I attempted to do something like this a while back an never really got around the quirks. No problem with it now.

     Thanks!

251. Hi,
     great example, it works on all the other browers but explorer. I keep getting an error on line 53 which is

     for (i=0; i<navRoot.childNodes.length; i++) {

     and the next line is

     node = navRoot.childNodes[i];

     please can anyone help
     i have explore ver 6

252. I don;t get the hovering elements to work in the following case:
     Trying to use this menu with the body being a fixed size div with the following style applied.

     .content {OVERFLOW:auto;height:550px;PADDING: 0px 0px 5px 5px;}

     When I fix the height so a scroll bar appears, then the menu appears but disappears when mousing over….

     Don;t understand enough about DOM to know why this occurs (in firefox by the way, and same occurs with the Dutch naarvoren.nl menu – first post). Just thought i’d add my bit… otherwise excellent idea – thanks.

253. Hi, I’ve spent some time learning and implementing this menu system into my site, and I like it very much. I didn’t want to get into heavy JScripts because I need to keep things simple. On Mozilla Firefox, it works great with 2 levels of sublist, but I am not sure how to setup the javascript to handle the second level of menus. It works with the first level but not the next. I tinkered a littlebit, but I don’t know what to add. Is there a simple bit of code I could add to make it work?

     Also, It works great (not in IE6) with the 2nd level of drop downs, but I have not been able to have much sucess over a third level (it will only hide the third level until you reveal the second level, at which time it reveals the third level. I’m referring to it as Top level, First level (as deep as the article shows you how to create), 2nd level (one more down – this works fine), 3rd level (doesn’t work – when u mouse over a 1st level list to show a 2nd level list, any third level lists appear when the 2nd level list does).

     Thanks so much!

     Kindari

254. Hi,
     I’m a novice at html but would really like to use this menu. Where on your html page do you place ul {
     margin: 0;
     padding: 0;
     list-style: none;
     width: 150px;}
     etc?
     Many thanks

255. http://northwest-data.com/new/alerts/

     Anyone have an idea on how to prevent the floating right div from jumping around when the drop down menus fly-out?
     I noticed it in Firefox, but not in IE (go figure…)

     Thanks!

256. The CSS code goes either in:

     
     

     
     

     or in an external .css file, which is just a text document containing the CSS code.

257. A simple and usefull article!
     I made the menu on my own and it works without any problem.

     Now I want to integrate the menu in the left frame of my homepage. How can I make it overlap in the main frame?
     If it doesn’t the menu would take to much space. Is there a simple possibility to realize something like that?

258. Hi,

     I love this solution and am using a combo of it and the Suckerfish code to make my menus work. There’s one thing missing I would love some help with.

     I want to have my top level item (i.e. About Us) remain highlighted in the hover color while the user is over the sub-menu (i.e. company news, our offices, etc)…how can I make this happen?

     Thanks,
     Sara

259. Im very new to Javascript, where do I put it in the code of the whole site? will someone email me with what the final product of this should be?

260. For a fleeting split-second I was able to see your intended formatting, but it disappeared and reverted to the original bland first effort. Was this intended or has something gone wrong somewhere?

261. why you are not using one of “event attributes”:
     ‘onmouseover’…’onmouseout’…etc

     same question goes to : http://alistapart.com/articles/tableruler/

     instead of the javascript

     is there any problem with this attribute i should know of ???

     list of “event attribute” :
     http://www.w3schools.com/tags/eventattributes.asp

262. Oop srry Forgot my email address, its Skittlesll4991@hotmail.com

263. If anyone is using a MAC look at this site in IE and please help me figue out y this is happening, its completely bizaar.

     http://www.thecard.cc

264. This was an extremely helpful article, but I am having a couple of problems with it. (additional information at bottom of comment)

     1.Using an Iframe with this script, as you would see in my code, My levels stop the second I pass into that Iframe, is there a way I can stop that from happening?

     2.How can I make this menu support multiple levels, at the moment all we need is two subs.

     ADDITIONAL INFORMATION
     Please e-mail me the answers if possible.
     E-mail — Zlord1@gmail.com
     you do need to go to the specified url in order to understand most of my questions.

265. congratulations for the article.

266. In trying to keep up to date with standards I tried this in XHTML 1.1 only to find that nested lists don’t validate with the W3C validator.
     How can I get it to work?

267. I’m in the process of using this technique on a site that doesn’t have a fixed width or fixed position design. How can this be acheived? For instance I have a navigation element that is wrapped in a container

     tag that is centered on the screen. How can you use this technique when you use position:absolute for the second ul?

268. I tried having more that just two layers like the example, but when I hovered over the first layer it showed the 2nd and 3rd layer. How do I hide it until I hover over the second layer?

269. Why not simply use a:hover to open the sublists, to work around the IE bug without using JavaScript?

270. Will be better if it was vertical style. Does anyone know if theres a vertical style css menu using the same concept?

271. I does not work with this code made by youre article:

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

     <html>
     <head>
     <SCRIPT LANGUAGE=”JavaScript “>
     startList = function() {
     if (document.all&&document.getElementById) {
     navRoot = document.getElementById(”nav”);
     for (i=0; i<navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];
     if (node.nodeName==”LI”) {
     node.onmouseover=function() {
     this.className+=” over”;
     }
     node.onmouseout=function() {
     this.className=this.className.replace»
     (” over”, “”);
     }
     }
     }
     }
     }
     window.onload=startList;
     </script>
     <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><a href=”#”>Home</a></li>
     <li><a href=”#”>About</a>
     <ul>
     <li><a href=”#”>History</a></li>
     <li><a href=”#”>Team</a></li>
     <li><a href=”#”>Offices</a></li>
     </ul>
     </li>
     <li><a href=”#”>Services</a>
     <ul>
     <li><a href=”#”>Web Design</a></li>
     <li><a href=”#”>Internet
     Marketing</a></li>
     <li><a href=”#”>Hosting</a></li>
     <li><a href=”#”>Domain Names</a></li>
     <li><a href=”#”>Broadband</a></li>
     </ul>
     </li>
     <li><a href=”#”>Contact Us</a>
     <ul>
     <li><a href=”#”>United Kingdom</a></li>
     <li><a href=”#”>France</a></li>
     <li><a href=”#”>USA</a></li>
     <li><a href=”#”>Australia</a></li>
     </ul>
     </li>
     </ul>

     </body>
     </html>

     What am i doin wrong?

     Greetz

     Rivers

272. 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.”

273. 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.

274. 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

275. 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 !

276. 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.

277. 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

278. 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?

279. I was looking how to make “safe” horizontal lists for a long time. This is a great way to do this! I am impressed.

280. 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.

281. 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

282. 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 JavaScript:

     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[i];
     if (node.nodeName==”LI”)
     {
     node.onmouseover=function()
     {
     this.className+=” over”;
     }
     node.onmouseout=function()
     { this.className=this.className.replace(” over”, “”);
     }
     node.onclick=function()
     {
     this.className=this.className.replace(” over”, “”);
     }
     }
     }
     }
     }
     window.onload=startList;

     — Margrit

283. How about sub menus that always display at the top, instead of just to the right of your current mouseover?

284. 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

285. 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 http://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?

286. 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.

287. Does anyone have a workaround for the problem with 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 element by assigning it an id — there are several on each page that are affected and there are thousands of pages in the site.

288. 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?

289. 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.

290. • Home
     • Test

     • Regular
     • Commissions
     • Organisation

     Test2

     • Option1

     • link1
     • link2
     • link3
     • link4

     Option2

     Contact Us

     • United Kingdom
     • France
     • USA
     • Australia

     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.

291. 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!!

292. 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

293. 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?

294. 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?

295. 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 🙁

296. “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/