Great post! I’ve been looking for something like this for a while now.

Also I just tested it in IE 7 and it works great!

Good job

Pretty fly. You just need to add

.top { cursor: pointer; }

It’s weird having a select cursor interact with things like that.

Nice job though.

I also like to add some javascript so the sub menus have a delay on roll out. That way if a user accidentally rolls their mouse off the sub menus, they don’t instantly disappear. Its very easy to write a custom function to do so.

The drop down doesn’t work in IE6 because IE doesn’t support the :hover pseudo class on anything other than <a> elements.

You could fix that with some class names, though.

Bill,

can you please give an example on how to work around the IE6 issue using class names? Thanks in advance!

this is useless unles it works in IE6

This seems to be a cutdown version of the Suckerfish menu (A List Apart, No. 162) – so are you just ripping this and claiming it as your own, or am I missing something?

Pretty, thank you.

Good idea, you will need to apply some javascript for IE6 to get this working though.

Works great in Firefox, but agree with the others that IE6 is still a must, anywhere from 10 to 30% of visitors are still using IE6 according to the google analytics I check frequently on 8 sites.

D’oh – I goofed. What I meant was class names and JavaScript, or by routing the hover stuff through A elements.

D’oh – once again, I goofed. Impossible to route the hovers through A elements…at least that I can think of.

I’m going to stop commenting now, this isn’t working out for me.

I agree that this is nothing new. I also wish that it were only this easy to get something so useful to work on the web in all browsers. That not being the case this is a nice technique.

If you are running your site on a windows host you can use the whateverHover extension for IE6 (http://www.xs4all.nl/~peterned/csshover.html) and the :hover will work on anything.

At work I program in ASP and this works like a charm. At home I program in PHP and haven’t gotten this whateverHover to work on my server. If anyone has any other ideas for Linux servers, I would be interested to hear about it.

It works in Opera 9.24 as well, in case you were wondering.

Nice start. However, you don’t need class names on every element and you can streamline the code even further by removing the parent div.

I’ve been using my own variation of the Keyboard Accessible Sons of Suckerfish menu for a few years now:

Sons of Suckerfish

Keyboard Accessible Sons of Suckerfish

Old … really old (just google for “sons of suckerfish”) and above all won’t work in IE6 as that one does not support the hover state on li-elements …

May as well have used a tiny bit of Javascript.
Penetration is like 99% so why the hell not and it would have worked much better

I don’t think Matt is claiming this as his new patented way of doing CSS hovers. I think it is cool that people are still experimenting on their own with CSS to see what they can get it to do. Sure, CSS menus have been widely available since at least 2003, but not everyone has been a CSS snob since 2001 and seen these publications happen.

That said, I do think Matt should acknowledge this and edit his original post with links to the Son of Suckerfish article so as not to mislead other newcomers into blindly adopting his faulty, though good, first try.

Hi,
i don’t think display: none; is a good idea to make a website accessible (some screenreader don’t read the display: none; elements), prefer
position: relative/absolutre;
left: -999/0em/auto;
Next, try your css on Opera it’s the strictest web browser on CSS (works on Opera 9.50 Beta 1 on linux)
have a look at :
http://css.maxdesign.com.au/
http://www.456bereastreet.com/#content-secondary

Number one problem:

This is not semantic mark-up. The lists are not nested properly, which just throws the whole concept of hierarchy of information out the window from a text/accessibility standpoint. Plus, I agree with half the other comments on this. If it does not work in IE 6, it’s useless because none of my clients would ever accept that. IE6 still holds about 60% – 70% of the market share as a whole. Nice try though. I think I saw a semantic version done in Practical Web Design mag a little while ago.

I don’t see what the big deal is? I’ve been using the SuckerTree menu available at DynamicDrive for a while now and it works fine. Why re-invent the wheel?

Anyway, good luck with the project.

Here’s how to work these menus by a blind person using VoiceOver on a Mac with Safari:

Be sure you have your mouse following the VoiceOver cursor .
Navigate to the Menu when VoiceOver reads the menu title lift up on the VoiceOver keys (control-option) the menu will then open and you can navigate it using VoiceOver keys and down arrow. To click a link do VoiceOver keys spacebar.

This doesn’t work at all on an iPhone/iPod.

Here’s the Pure CSS Pull-Down Menu I posted back in 2003. I’d actually forgotten about it. :)

Hi Bill,

Elegant menu. Doesn’t work in IE6, though.

IE7 and all other browsers fit the bill, but unfortunately, the Model T of CSS compliance won’t play nice.

I’ve assigned one of my developers to try and work it for IE6 this afternoon. We’ll see if he is able to get anything going here.

@: lyhana8
Using display vs. position has an impact on keyboard users.

I wrote an article on pure CSS dropdown menus:
link

Examples:
link
link

And this article list a few of them:
link

I think all you need is the IE7 script by Dean Edwards. It fixes :hover on other elements.

http://dean.edwards.name/IE7/

This is great!
There is an even more spiffier version with the IE6 fixes here:

http://www.cssplay.co.uk/menus/final_drop.html

You can use these for free/permission. A donation is also welcome.

And no… I don’t work for this guy, I just love his work :)

R

For IE6 use condition comments I would post them here but he has HTML set up for this box.

Try looking at the source on this site.

<a href=“http://www.hada.com”>www.hada.com</a>

That is a full CSS based menu working in all main browsers.

Don’t work in IE6.

To get it to work on IE6, you’d need to hack it a bit, instead of having:

li:hover

Use:

li a:hover

with the same declarations as the li:hover (use both).

All my Pure CSS menus come from:
http://www.cssplay.co.uk/menus/

when will you all get it through your thick skulls that using IE6 is just not practical anymore. This script is not “useless” if it doesn’t work in IE6, your browser is just obsolete

Does it work in vertical mode?

Nice start…

You goto SCAD? I graduated ’06 what’d you study?

@Caesar:
No that won’t work within valid code structure. The only way to get IE6 compatibility is with JavaScript help.

@Tracey:
Dean Edward’s scripts introduce a hefty performance price for ‘Everything :hover’ functionality that doesn’t justify it’s use over an equivalent JavaScript method. And yes, Dean’s script is still based on JavaScript to fix IE6 it just isn’t implemented the same way.

@Tyler:
Clearly you’re not involved in professional web production Tyler. Try telling a client that.

Why is this on Digg if it’s so old and buggy technique? If you want proper CSS menu, check Stu Nichols’ CSSPlay URL

@Ryan Christie

If you would have bothered to check CSS Play, http://www.cssplay.co.uk/menus/, you would have seen that the way I mentioned works and is fully valid. Stu Nichols have several examples of CSS drop downs, fully compatible with any browser, and I believe they are all valid.

I prefer using definition lists as the seem more logical to me if CSS is disabled (for whatever reason), so I came up with:

http://www.luminancedesign.co.uk/developing/

I don’t support IE6 unless by request as there’s no reason for people to not update to IE7 or use one of the many free browsers.

I think this is a bit out of hand. This is a student’s personal blog. He was experimenting, which is the best way to learn. Period.

If this catches the eye of someone new to css and semantic html, great. But, don’t take this example as a new or perfect solution as it certainly has flaws.

And, congrats to Matt for managing to generate so much buzz with a simple learning experiment.

As mentioned numerous times above, the challenge for pure CSS drop downs comes down to :hover not being supported by IE6.

The only pure CSS solution I’ve been able to test and verify was Stuart Robertson’s, which uses conditional comments to serve alternative HTML (tables) to IE6. And while his solution is certainly innovative, it’s also a lot easier to just use js.

duh!

li:hover does not work on ie6. you gotta use an a inside the li and use a:hover to do the effects.

lol.

IE6 is still around for those peeps who run pirated Windows. You gotta support the population.

That is really cool.

IE 6 makes working with CSS and pictures very difficult. Sigh* So many problems for a CSS designer…

Nice post thanks!

I just noticed a comment that honetly don’t make much sense.

I don’t support IE6 unless by request as there’s no reason for people to not update to IE7 or use one of the many free browsers.

You have to understand that 99% of web users are not developers. Most of them just use the computer to access information, don’t know anything about computers, versions, softwares of updates. They just use what they see, it’s very important to develop scripts that works in most browsers so information can be reachable. If for example i use this css menu and 40% of 6.0 Internet Explorer users can’t access submenus, it won’t be much of a webpage, even is xthml and css compliant.

Sorry the bad english.

WARNING:
Not only will this not work in IE, it is invisible to search engines.

Using display:none; causes your list item to be invisible to screen readers and search engines. Having that in a navigation is poor practice. It’s better to use height:0 and overflow:none.

Check out web standards. They are GREAT!

@Jim – I assume you meant ‘Check out accessibility practices’. The technique here is not mutually exclusive with web standards.

I agree with Mariusz
on Nov 28, 02:33 PM
Why is this on Digg if it’s so old and buggy technique? If you want proper CSS menu, check Stu Nichols’

and Stu is a css guru for me, but he is playing with css. He’s solutions not allways usability or accessibility.

We all can learn from him, but as a webdesigner, we have to realize that internet user are no developer, no gurus only internet user who would like to read.

;)

regards

Thanks for good articles.

you can use table to make it work in ie6

How can you not support IE 6 there are so many people out stuck in IE6 because of apps or site that work in IE6 and not IE7. Thats a terrible programming practice, and you are becoming dangerously like Microsoft. Backwards compatibility is a must.

On a side note Dreamweaver’s spry framework is amazing for these kinds of menus, and also includes the nice javascript delay.

http://labs.adobe.com/wiki/index.php/Spry

FYI TO all who find this post.

It doesn’t work in IE6

IE 6 makes working with CSS and pictures very difficult

css has many amazing benefits adding display: block, may solve the problem with the menu working correctly in ie6.

HEY! I don’t think this works with IE6!

Sorry, just feeling left out. Does it really take 486 posts to say that? I think people get it after the first 4 or 5. No need to duplicate posts… read people.

css has many amazing benefits adding display: block, may solve the problem with the menu working correctly in ie6.

IE 6 makes working with CSS and pictures very difficult

FYI TO all who find this post.

It doesn’t work in IE6

thank youuuuuuuuuuuuu

thank youuu

Good stuff. Thanks and greetings!

thank youuuu

Thanks you Nice blog..

Organizasyon thanks !

thanks good :)

Sorry, just feeling left out. Does it really take 486 posts to say that? I think people get it after the first 4 or 5. No need to duplicate posts… read people.

D’oh – once again, I goofed. Impossible to route the hovers through A elements…at least that I can think of.

I’m going to stop commenting now, this isn’t working out for me.

Excellent! Many thanks for that!

Sorry Pal, but posts are duplicated by itself!

Great work, though.. Thanks much!

hello!

the code is working with my blog, but my question is – how to put border in it.

webmaster blog thanks you !

uuuuuuuuu what a nice “do it yourself”! many thanks!

Hi I’m using safari, the demo is a bit messed up, can you fix that for safari?

Very good.

Good stuff. Thanks and greetings!

Thank you so much. I appreciate your work. Many thanks.

soğutma thanks….

zart zurt ne yapak…

thanks you..

You are much better if using this:
link

Beatiful

eyvallah beatiful

cosmusunuz be :D

cosmusunuz !

thanx for this good drop down idea.

Very good, thank you but
it don’t work in IE6.