Mobile Friendly Website


Doing it with style

A menu with overrun COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Sorry to say that this menu shows odd behaviour in Firefox 1.0.8 on Linux.

The rightmost menu-items work more or less correct, after initial strange effects. The leftmost though, do not work. Same initial strange effect, menu button finally shows up correct, but the underlying menu-items disappear when the mouse scrolls down.

HtH. Best wishes.
(01.01.2007, 20:56)

Unfortunately this browser along with, Mozilla, Netscape IE5.x are not able to handle this complexity. Works fine in IE6, IE7, Opera and Firefox on Windows PC.
(03.01.2007, 15:30)

Stu these are great accessibility features for drop down menus.

Has this ever been done with JS? It must have been done with flash in the past?

Another amazing menu, thanks Stu.
(04.01.2007, 01:06)

Tim, some javascript menus has a delayed close function for example.
Whilst this does not have a delay it does allow some latitude when accidentally moving off a sub level link.
(04.01.2007, 08:06)

Update: I decided to try and make it work in FF 1.0.8, so I stripped the page down to just the inline styles and the info-div with everything in it. Guess what? It works fine now, so it seems to me that the "standard" stylesheets on the page were interfering and causing the "strange behaviour.
(04.01.2007, 11:25)

Leo, thanks for the feedback. I will look into this.
(04.01.2007, 13:06)

Update: Stu, I narrowed it down a bit more. The problem is somehow caused by the #info_right block in the css_play.css sheet. Once I comment out the #info_right section in the stylesheet, it works fine.
(04.01.2007, 15:48)

Leo, I have given the containing div a width to see if this helps, it could be due to the two float left divs #info anf #info_right.
(04.01.2007, 19:07)

Stu, tha bad news is: that doesn't help. The good news is: I found the troublemaker. The #info isn't the problem. It is the "float:left;" in the first #info_right line that is causing the trouble. If you just leave that "float:left;" out, the menu works fine.
(04.01.2007, 19:19)

Leo, how about float:right?
(04.01.2007, 19:28)

Stu: float:right works fine too. And somehow it seems much more logical to me for an info_RIGHT id too ;-)

Maybe one of these days you'll find this menu on my new site-layout. :-)) (with copyright-notice of course)
(04.01.2007, 19:34)

Works perfectly fine now. Thanks for your effort, Stu!
(05.01.2007, 08:26)

John Nicholls:-
Hi Stu

Unfortunately this doesn't work for me in IE6. The top menu hover happens and the text changes colour, but no sub-menu. IE7 is great though.
(05.01.2007, 11:13)

John, I had the same kind of problems in Firefox (Linux), but after a change by Stu it works fine here in FF and in IE 5.5. Take a look at

If that one works, the problems is (still) in Stu's general stylesheets.
(05.01.2007, 11:44)

John, it works perfectly for me in IE6, are you referring to this demo or one you are trying to make?
(05.01.2007, 12:10)

Hi, is there any way of getting this to support unlimited levels of submenus?
I would really appreciate it!
(12.01.2007, 18:36)

Unfortunately this one doesn't work in Konqueror :-( The background-pictures are not shown and the drop down doesn't work either.
(12.01.2007, 23:45)

Stunning! I didn't realise it was possible to do this so elegantly without Javascript. This looks a definite possibility for incorporation into my own site :)

(13.01.2007, 02:49)

It doesn't seem to be working in my standalone version of IE6.
(13.01.2007, 05:44)

Bahhumbug, just ignore me. The only reason it's not working is probably because IE Standalones don't recognise IE conditional comments correctly. I'll post back in a few mins if this isn't the case.
(13.01.2007, 05:47)

Nope, that's not the problem. I just doesn't work at all :( This is somewhat of a pain for testing purposes :(
(13.01.2007, 05:49)

Ryan, I have one PC with IE6 and another with IE7.
I think that standalone versions 'think' they ae the latest version on your pc. I have standalone versions of IE5.01 and IE5.5 on my IE6 PC and they all think they are IE6. So I can't use conditional comments to target IE6 only.
(13.01.2007, 09:57)

I found this example of a CSS-menu with unlimited
submenus, maybe it's helpful.
(yes, the address starts with 2 '_'. looks wird without the http part.)
(13.01.2007, 13:04)

On my pc it works with Firefox (linux) and it also works with Konqueror 3.5.5 -- it still doesn't work with Konqueror 3.5 though.
(13.01.2007, 13:16)

sowl, also doesn't work in IE5.x or IE6.
You can have as many sublevels as you like if you ignore IE6 and earlier. Check
(13.01.2007, 13:30)

ah, ok. that sucks.
how dows the overrun thingy work? i'm no css expert and it would be great with some explaination on how it's done.. ;)
(13.01.2007, 13:37)

sowl, the overrun is achieved with just a little padding around each dropdown <ul>
padding:0 3em 3em 3em; with a transparent background image to make it invisible.
(13.01.2007, 15:20)

Ste McCarten:-
I feel like I'm missing something here. The demo on this site works fine in IE6 but if I copy and paste the CSS and HTML into a blank web page on my local computer it doesn't work in IE6.

Is something that's required in an external CSS file Stu?
(16.01.2007, 22:30)

Ste McCarten, it will work 'straight out of the box' but you must be using a standards compliant doctype. Also check that the conditonal comments are still in place in the source code.
(16.01.2007, 22:37)

Ste McCarten:-
Ah, thanks Stu.

I was using a Firefox extension for viewing source code and this was messing with the formatting when I was copying the HTML.
(17.01.2007, 12:52)

Ben Collins:-
I love your website and I have learned a ton from your CSS examples. Thank you so much for posting them free of charge. I would love to use it on a website that I am redesigning and will gladly contribute a donation if I can get it working. That leads me to...

I am trying to use your "CSS only drop-down menu with overlap and overrun" example, but if you remove the css_play stylesheet from the header section, then the 5th menu item drops down to a second line. Is there anyway you could make the menu "stand alone" in that everything it needs would be included in the CSS definition in the HTML file header? I've tried moving things around, but I haven't had any luck in getting it to render correctly.

Thanks for any help you can offer! Sorry if you get this post in another section, but I can't seem to find it anywhere so I'm going to post again.
(30.01.2007, 14:55)

This version is the one I like best, but it's missing an important feature that was available in earlier versions:
The ability to make submenus display on the left side of the dropdown. It was achieved using a class named "left".
Without this feature, the rightmost submeny will not be visible on some computers with low screen resolution.
I tried copying the "left"-class from a previous version of the menu, but that didn't solve the problem.
How can I fix this?
(13.02.2007, 12:48)

Hi Stu,

Very impressed by this use of CSS. But when I have tried to use it myself I've run into some issues with Sarari that I can't find a solution for.

Basically what happens is the first menu item you hover over causes it to dissappear. The other items remain. Then with the lists that appear they leave a staining effect (part of the list stays on the screen) when you mouse off.

Any ideas?
(28.06.2007, 08:19)

I noticed that in this demo, as the menu opens, some of the menu items have larger height than others, depending how much text needs to be dislayed. Which variable should be set to allow this variable height?

(30.07.2007, 11:44)

Hello, I would like to use a menu in my blog, but I dont find the css file in the page of the menu, how can I find it?

Sorry of my english, I am spanish
(07.08.2007, 18:21)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page