A List Apart: Comments on: Drop-Down Menus, Horizontal Style

Posted by: PeeWee

2012-01-31T13:00:49+00:00

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

Posted by: apartness

2012-01-31T13:00:49+00:00

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.

Posted by: Neil Crosby

2012-01-31T13:00:49+00:00

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.

Posted by: Andri

2012-01-31T13:00:49+00:00

Has anyone managed to do this with a multiple nested list? Now that would be interesting :)

Posted by: Anne

2012-01-31T13:00:49+00:00

Would it be possible to change this?

Posted by: Tom

2012-01-31T13:00:49+00:00

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]

Posted by: Michael Ward

2012-01-31T13:00:49+00:00

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

Posted by: guyPaulo

2012-01-31T13:00:49+00:00

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?

Posted by: Nick Franceschina

2012-01-31T13:00:49+00:00

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 :)

Posted by: Andrew Hume

2012-01-31T13:00:49+00:00

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.

Posted by: -mat- filid brandy

2012-01-31T13:00:49+00:00

Does not show the embedded ul. :(

Posted by: Marek Moehling

2012-01-31T13:00:49+00:00

The menu works with IE6 on my system (WinXPSP1-IE6 version see below) Nevertheless, the aforementioned example at 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;

Posted by: Highforge

2012-01-31T13:00:49+00:00

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

Posted by: Nick Rigby

2012-01-31T13:00:49+00:00

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

Posted by: Aaron G

2012-01-31T13:00:49+00:00

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

Posted by: Nick Rigby

2012-01-31T13:00:49+00:00

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.

Posted by: apartness

2012-01-31T13:00:49+00:00

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

Posted by: Jonathan Snook

2012-01-31T13:00:49+00:00

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.

Posted by: Simon Dvorak

2012-01-31T13:00:49+00:00

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!

Posted by: Daniel Norman

2012-01-31T13:00:49+00:00

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.

Posted by: Lisa Clarkson

2012-01-31T13:00:49+00:00

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?

Posted by: Lisa Clarkson

2012-01-31T13:00:49+00:00

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.

Posted by: Blake Scarbrough

2012-01-31T13:00:49+00:00

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.

Posted by: Nick Rigby

2012-01-31T13:00:49+00:00

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.

Posted by: Andrew Hume

2012-01-31T13:00:49+00:00

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.

Posted by: Nathan Olson

2012-01-31T13:00:49+00:00

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

Posted by: Nick Franceschina

2012-01-31T13:00:49+00:00

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)

Posted by: joel

2012-01-31T13:00:49+00:00

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.

Posted by: Blake Scarbrough

2012-01-31T13:00:49+00:00

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.

Posted by: Weixi Yen

2012-01-31T13:00:49+00:00

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.

Posted by: Eugene T.S. Wong

2012-01-31T13:00:49+00:00

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.

Posted by: Jonathan Snook

2012-01-31T13:00:49+00:00

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

Posted by: apartness

2012-01-31T13:00:49+00:00

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.

Posted by: planetsram

2012-01-31T13:00:49+00:00

Excellent article once all the bugs got worked out.

Posted by: Patrick Griffiths

2012-01-31T13:00:49+00:00

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.

Posted by: Tanny O'Haley

2012-01-31T13:00:49+00:00

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.

Posted by: kadavy

2012-01-31T13:00:49+00:00

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.

Posted by: joz

2012-01-31T13:00:49+00:00

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

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

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

Posted by: Kevin Freitas

2012-01-31T13:00:49+00:00

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

Posted by: Nick Franceschina

2012-01-31T13:00:49+00:00

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

Posted by: Marek Moehling

2012-01-31T13:00:49+00:00

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.

Posted by: Alex

2012-01-31T13:00:49+00:00

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

Posted by: Mark Wyner

2012-01-31T13:00:49+00:00

This technique is slim, simple, and incredibly easy to modify. Nick, I wrote an [url="http://www.alistapart.com/articles/cssemail/"]article[/url] 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.

Posted by: Richard PErry

2012-01-31T13:00:49+00:00

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.

Posted by: Richard Perry

2012-01-31T13:00:49+00:00

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 ;)

Posted by: Sainkho

2012-01-31T13:00:49+00:00

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.

Posted by: Andrew Mabbutt

2012-01-31T13:00:49+00:00

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

Posted by: Bill Coleman

2012-01-31T13:00:49+00:00

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!

Posted by: Gail Dedrick

2012-01-31T13:00:49+00:00

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.

Posted by: Ramon

2012-01-31T13:00:49+00:00

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)

Posted by: chris

2012-01-31T13:00:49+00:00

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

Posted by: iG.STUDiO

2012-01-31T13:00:49+00:00

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.

Posted by: iG.STUDiO

2012-01-31T13:00:49+00:00

* ...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... :)

Posted by: Duy Nguyen

2012-01-31T13:00:49+00:00

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

Posted by: Peter

2012-01-31T13:00:49+00:00

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! :-P 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!

Posted by: Chris

2012-01-31T13:00:49+00:00

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

Posted by: sparsely

2012-01-31T13:00:49+00:00

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.

Posted by: Eric

2012-01-31T13:00:49+00:00

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?

Posted by: Al Sparber

2012-01-31T13:00:49+00:00

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.

Posted by: Neil

2012-01-31T13:00:49+00:00

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

Posted by: Marc

2012-01-31T13:00:49+00:00

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.

Posted by: apartness

2012-01-31T13:00:49+00:00

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?

Posted by: Tanny O'Haley

2012-01-31T13:00:49+00:00

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.

Posted by: Al Sparber

2012-01-31T13:00:49+00:00

Hi Neill, It would likely be in our Tutorials section and free - like the other ones in there :-)

Posted by: Al Sparber

2012-01-31T13:00:49+00:00

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

Posted by: isaac

2012-01-31T13:00:49+00:00

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

Posted by: moe

2012-01-31T13:00:49+00:00

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

Posted by: PeteG

2012-01-31T13:00:49+00:00

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!

Posted by: Ian Gordon

2012-01-31T13:00:49+00:00

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?

Posted by: babyshambles

2012-01-31T13:00:49+00:00

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. :)

Posted by: rascalpants

2012-01-31T13:00:49+00:00

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

Posted by: Ruben Cepeda

2012-01-31T13:00:49+00:00

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.

Posted by: Daynah

2012-01-31T13:00:49+00:00

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/

Posted by: Stewart Rosenberger

2012-01-31T13:00:49+00:00

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

Posted by: rascalpants

2012-01-31T13:00:49+00:00

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

Posted by: eigeneachse

2012-01-31T13:00:49+00:00

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

Posted by: Chris

2012-01-31T13:00:49+00:00

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.

Posted by: Steven

2012-01-31T13:00:49+00:00

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.

Posted by: Charles B.

2012-01-31T13:00:49+00:00

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/

Posted by: Anca

2012-01-31T13:00:49+00:00

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.

Posted by: Chris

2012-01-31T13:00:49+00:00

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

Posted by: John Madok

2012-01-31T13:00:49+00:00

Does anyone tried to make it horizontal?

Posted by: Lawrence Akka

2012-01-31T13:00:49+00:00

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/

Posted by: Sniffer

2012-01-31T13:00:49+00:00

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.

Posted by: apartness

2012-01-31T13:00:49+00:00

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.

Posted by: Bill Coleman

2012-01-31T13:00:49+00:00

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!

Posted by: Nate

2012-01-31T13:00:49+00:00

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

Posted by: scotacus

2012-01-31T13:00:49+00:00

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.

Posted by: Charles B.

2012-01-31T13:00:49+00:00

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.

Posted by: Nick Rigby

2012-01-31T13:00:49+00:00

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

Posted by: David Lees

2012-01-31T13:00:49+00:00

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

Posted by: John

2012-01-31T13:00:49+00:00

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?

Posted by: Eugene T.S. Wong

2012-01-31T13:00:49+00:00

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.

Posted by: Biff

2012-01-31T13:00:49+00:00

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?

Posted by: Bob Mutch

2012-01-31T13:00:49+00:00

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

Posted by: Dante

2012-01-31T13:00:49+00:00

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

Posted by: Sniffer

2012-01-31T13:00:49+00:00

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!

Posted by: Charles B.

2012-01-31T13:00:49+00:00

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. [url="http://www.frinc.com/personal/charles/cssmenu/index2.htm"]http://www.frinc.com/personal/charles/cssmenu/index2.htm[/url]

Posted by: Mark Primavera

2012-01-31T13:00:49+00:00

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