Mobile Friendly Website


Doing it with style

Drop-down fun 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

Andrew Urch:-
This looks great! Thanks for putting this up. I'm a CSS novice. Might you have advice for making this work with the style in an external style sheet? I do not know how to code styles so they are only read by certain browsers but would like to try this with and external css. This is exciting!
(28.04.2004, 21:06)

Remember, this one is just for fun, It would not be correct to use it on validating pages ;)
(04.05.2004, 08:14)

What is the reason for the 'holder' divs? If you take them out the code still seems to work just fine?
(21.05.2004, 13:53)

The holder div is there to stop the second menu from being displayed in IE
(23.05.2004, 19:08)

Bob Clarke:-
Just tried this in NN7.1, seems to work fine.
(28.05.2004, 22:34)

It does indeed. I have been working with NN7.0 but now have upgraded to 7.1 and a few of the examples that didn't work are now ok.
(30.05.2004, 00:26)

Al Lustie:-
This is great stuff. Thanks for sharing it. I can see several uses for it already. I'll let you know when / if I use it.
(21.06.2004, 00:15)

Sigh... IW is just insane. I modified this in hopes of making a version that was stacked vertical, where the 'inner' items pulled out to the side. Works perfect in firefox, but IE wants to expand the size of both the _original_ menu when creating the pull-out menu. Any thoughts?
(20.07.2004, 17:20)

This is great. What if I want to make another supmenu?
(21.08.2004, 15:03)

I think this is pretty neat-o! Interesting concept... I too am a newbie and have a question about it not validating.., does that mean it is not considered "accessible" or I just dont get to put that cool bug on my page? I for do not understand :-
(31.08.2004, 18:48)

Kat, this menu will not validate using the html validator because tables are not normally allowed in links.
I have placed a modified doctype at the begining of the page that modifies the link element to allow tables within links but the validator is not yet up to recognising this.
So all this means is that you cannot put that xhtml valdated button on your page.
(31.08.2004, 20:17)

This is great stuff, BUT I work primarily on a MAC and this doesn't seem to work with IE5.2Mac. Is there a workaround for this?
(31.08.2004, 21:35)

This is reat. What if I want to make another submenu though?
(15.10.2004, 19:24)

Nice work but it doesn't work on MAC OS X IE 5.2 :-(
(28.10.2004, 18:38)

I love you. I absolutely love you. I am working on a layout for a blog site (Livejournal), and they do not allow any type of javascript in the code. I have been searching for a purely CSS alternative. Again, I say...I. love. you.
(04.11.2004, 03:02)

ya, same here.. doesn't work on MAC IE... IE on mac sucks anyways.... dunno why ppl still use it
(16.12.2004, 01:19)

Hi, great menu, trying to implement it here:, unfortunately it pushes the other content down. Please can you take a look and see if there's an easy solution?
(22.12.2004, 14:05)

Mike, you will need to take the menu out of the flow and give it an absolute position.
(28.12.2004, 11:01)

Stu - I'm having the same problem that Mike said he was having (I think he gave up on it because the page he refered to is no longer there.) Can you explain what you mean by taking the menu "out of flow and give it an absolute position"?

Also, I'm having trouble getting it to work in Firefox. When I view the test page in Firefox I get the top level of the menu but no links and no drop downs. Any ideas?
(07.01.2005, 02:05)

I forgot my test URL:
(07.01.2005, 02:09)

I have now added an extra demo to show the menu overlapping the content using position:absolute;
(17.01.2005, 12:22)

Hi, this is excellent for pure CSS, just a lil problem though,changing the content of the menu seems to creat problem with IE5. Could you please advice,thks
(11.04.2005, 05:56)

Hi Stu,

You just solved THE problem. Making a site with flash, java or even viagra, anyone can do that; then put it on a promo-CD with catalogs with 3000 choices and the XP-SP2 will dirve any unexperienced PC user crazy and no business wants to show off his goodies in this way (at least not in Italy where I'm working).
Your css (photo gallery and menus) are doing excellent. I don't know how to thank you for this!!!
Probably you will see what I can do - .I rewrote it to a barren state just to start all over again. When it really gets somewqhere I will show off to you.


Thanks again ...
(18.04.2005, 09:11)

Alex from Tuscany:-
OK, heaving my telephone line on kerosine, I failed your overlapping menu (found it out by myself-FP 5). I was already working on one page a time, but a real "frame" hoax ....?
Maybe I don't like that anyway. Once I've got something to show ... can I leave your link on my pages?

(19.04.2005, 11:35)

Brenden Burton:-
I saw that CSS and its just what my teacher and I was looking for... but only one problem... You see how the CSS is included inside the document itself... is there a way to have the CSS in its own document that way I could have other pages link to the CSS without having to include the navigation or use an iframe? I hope there is a way... thanks
(22.04.2005, 19:30)

If you look at my source code you will see that the style is only included for the demonstrations.
There is also a standard page style which is loaded from an external style sheet. This take the form of <link rel="stylesheet" media="all" type="text/css" href="../styles/s7u2.css" />
(22.04.2005, 19:55)

Geoffrey H. Goldberg:-
Nice job! Have you tried nesting submenus?
(29.04.2005, 20:24)

No, this is as far as I go with this method. Though you are free to take it further ;o)
(30.04.2005, 20:34)

Rich A:-
I've been unsuccessful getting the inner/holder menu to display horizontally under the outer menu (as an alternative to your vertical drop-down display). Can you point me in the right direction?
(01.05.2005, 00:41)

Rich A:-
OK, I made some good progress on getting the horizontal menu to work. However, I used the snazzy menu as a baseline, so I'll ask my question under that topic.
(01.05.2005, 23:12)

Stu - I know this is just for fun, but what approach do you recommend for designers wary of Windows Firewall and javascript blockers? The beauty of a CSS-only solution is that the navigation is still usable even if these things are turned on. I'm designing a commercial site and would love to use this solution, but the fact that it doesn't validate means I need to keep searching for the right solution. Can you provide your opinion?
(06.05.2005, 22:23)

David, I would not recommend using this method for anything 'serious'. Because it is not a valid solution, it should only be used for 'fun'.
If I were producing a commercial site then I would steer clear of drop-down and pull-out menu systems and try to find another way to navigate the site (I'm not a big fan of complex drop-down / fly-out / sub-menu systems). Maybe a standard unordered list menu with css 'flyouts' to describe the link page contents. A site map could also be used for 'quick navigation'.
(09.05.2005, 10:25)

Hello, interesting solution - but the top row of items do not seem to be able to take a link for Firefox. I got it working for fun in IE, but the top row of items (not the menu drop down items - those will link out, take an HREF tag as in a class "inner" href="mostly.html"). But in Firefox I could not get the code <div class="holder">Blogs <br />
</div> to take a hyperlink in anyway for the noniemenus? Any workaround for this?
Thanks, Jane
(10.05.2005, 20:33)

Not to come down on your work, but the Suckerfish dropdowns, with a few tweaks, work in IE, Safari and Moz/FF, and validate as well...
(21.05.2005, 10:10)

Te, it certainly does. But it also uses javascript and as I have said thousands of times before, this site is pure CSS. There are all sorts of things that can be done with javascript but if your visitor has it turned off then they wont work and you have to provide alternatives (especially with menus).
(21.05.2005, 10:48)

Graham Keellings:-
I have been searching for months for a server side menu which did not involve any JavaScript at all.

Now I have found it and I don't know enough CSS to add submenus (to a 3rd level). I could cry

If anyone ever manages this, for pity's sake, please inform

graham DOT keellings AT gmx DOT net

thanx a 1,000,000
(21.05.2005, 19:07)

christian 9393524ATgmx_DE:-
Drop Down Menu Example


I'm new to the world of webdesign, my actual page is made without drop down menues, but i like the effect and would use it here:

it's lousy made, but as it is my first site, i'm very happy with it.

Maybe you find the time to have a look at it and to tell me, if it is possible to "fine tune" it with your "non overlapping" drop down menues.

I'd be very happy about it!

Best Regards
P.S.: very nice site - added it to my favorites
(12.07.2005, 12:05)

Gun The R.:-
Stu, it's fantastic for Firefox but somehow using IE it slows down the pages very much. It seems that IE is calculating something but it takes at least 2 seconds to build the pages (even very small ones). Is there any chance to speed IE up with regard to your CSS-only-menu?

thank you
(19.07.2005, 08:19)

This one is just for fun to see if it was possible. It should not be taken seriously. If you want to use it then you should consider the problems (this being one of them).
(19.07.2005, 10:37)

Gun The R.:-
Thx. I've now tried to switch to the suckerfish but still got the same performance issues. I'm going to check, whether there's another difference causing that effect or does anyone got an idea? Is everyone else satisfied with IE performance using this ingenious menu?

(19.07.2005, 21:55)

Sorry for bothering, but I've found my mistake. I just want to inform you, that there's no issue with IE and your CSS-menu. Just some interdependency. I'll use your menu for my small site because it's really worth it!

Gun The R.
(20.07.2005, 16:33)

Dropdown menu given by u works in IE, well. but the issues are , the dropdown doesn't overflows on the another image, how can I solve this problem
(01.08.2005, 08:15)

Jerry from Detroit:-
Stu, looks great, and quite similar to what I need to do for a client (we currently use a lot of JavaScript to create these DHTML "flying menus", but new client wants as little JS as possible).
BUT, I've noticed that the menus in IE, while "popping up" over the text on a page, come up *behind* any SELECT lists. (It appears to work fine in modern versions of FF and NN, but fails in the same way with old versions of NN.) MS has acknowledged that this is due to the SELECT tag (and a few others) being defined as "windowed" elements, and thus ignore z-index and related CSS styles.
Have you come across this problem? Do you know of any kind of non-JavaScript, non-IFRAME solution? (One "solution" I've found is to set the display property of the SELECT lists to none when hovering over the menu, then set it back to "display" when done hovering.)

(15.08.2005, 19:23)

Click here to be amazed ;) DROP-DOWN MENU
I'm amazed that your calling it 'amazing' and it doesn't work in Mac IE 5.2.3.

There's nothing x-browser compatible about it at all - all your doing is wasting alot of people's time. x-brwoser.. means "all of them" unless explicitly stated otherwise!
(18.08.2005, 23:19)

Oh dear...someones not a happy bunny. I did say that this one was just for fun ;o) But I reckon that it works in about 99% of all browsers. Mac IE5+ is stuck back in CSS1 days and will not be updated so you will have to accept that there are a lot of web sites out there that you will not be able to see correctly. Sorry you were disappointed.
(18.08.2005, 23:20)

Hi stu,

First of all, thanks for all your good work.
Then of course I need a little help using your menuswith other divs in the page.

If you are ok to help me you can send me an email c dot humbert at free dot fr

Thank you very much

(07.09.2005, 14:46)

Foxy Lady:-
Thank you for your generousity (it terms of copyright) and fab work. Great stuff :)
(14.10.2005, 13:48)

Ive solved the drop-down menu problems:

firstly, the annoying ']>' doesn't go away completely, and thus it prvents the body top-margin being 0. To fix this, I used this code:

<div style="z-index:10;">
<!--[if IE]>[ <!ELEMENT a (#PCDATA | table)* > ]><![endif]--></div>

And simularly, to stop it moving the contents below it, use <div style="z-index:5;">All the code in body</div> and then, before and afterwards, use <div style="z-index:2;"></div>
(15.10.2005, 21:46)

Sandra - Beginner:-
Trying to create a dropdown horizontal menu like this example
As you will notice menu 1 is static which is what I want and then others which drop down to a submenus. So the look would be to click on menu buttons which would go to topic page and for the sub menu to appear. Is this possible or am I totally confusing everyone?
(02.11.2005, 12:14)

Another way the annoying ]> can be fixed:
body { margin: -1.1em; } html > body { margin-top: 0; }
That way IE shifts that line out of sight, Opera 7+ is OK, Opera 6 and Mozilla 1.7 still not.

Anyway I was using an <ul> within an <a> to get over the lack of :hover in IE. However it is not valid html, and IE just crashes when it should hover. Your tip would make it valid and theoretically (....) work in IE.

I tried your tip using ul instead of table (modified the DOCTYPE etc.) However IE then stops displaying the nested <ul> at the first <a>. Any idea if this is because an ul doesn't confuse IE enough or is it me that is confused too much ?

NOTE: This would then be the structure:
<li><a>sub 1</a></li>
(21.11.2005, 17:42)

Ed, the change in the doctype is just to make the markup valid, it does not make IE understand what you want. Nested links will not work in IE except when placed in a table.
(21.11.2005, 17:46)

Stu, I tried to change the small dropdown menu in vertical way, it works in IE6.0, but it doesn't work in Firefox (I left float: left; in de css style)- why ?
(06.12.2005, 21:33)

Awesome work friend! I have just one question though. On the drop down menu, is there a way to change the inner and outer clases so that you can have a submenu item under a submenu?
(29.12.2005, 17:27)

Stewart A.:-
Hey Stu, Stew here. I've been looking for a drop down menu that didn't use java forever and I think what you've done with this is amazing. I've managed to style it to fit a page I'm working on but the, hopefully, last bug has just been beyond my ability to fix.
See the page at . The menus are "About Us" and "Projects." Projects is the CSS dropdown.
The problems is obvious once you hover on Projects...I really don't want the content below the link pushed out of the way like that.
(08.01.2006, 02:48)

Stewart, you need to make the #menu position:absolute; and change the float;left; to right:0; this will position the menu in the correct place and take it out of the normal flow of the page. The drop down menu will then drop down on top of the page text.
(08.01.2006, 14:04)

Hi Stu, thanks a lot for this site and the work you´ve done! Could you help me with a problem that I still in my menus? I would love to send you the entire code if you don´t mind, but it might be too long to post it here. Could you give me an email adress I could use for this purpose? Thanks a lot in advance.
(09.01.2006, 21:08)

How can drop down menus be done with the first line of the menu also linked to a different site? I am a beginner :-( and I wonder how I can link the headlines of the menu to a different site. I appreciate any help!
(10.01.2006, 19:46)

Bernie, in the IE menu just add the link url to the first line. In the Mozilla/FF menu add the link around the first line text.
(10.01.2006, 20:45)

Thanks for your help and sorry for asking again. What do you mean by "around the first line text" in the Mozilla/FF menu? Can the link be put before the text, as well as after it? Or does it have to "include" the text?
(11.01.2006, 11:32)

I have tried to link a headline of your menu to a different site. The link works, however, in Mozilla, the color does not change to white anymore when it is being hovered. Also, the link does only work when the text is being clicked exactly, whereas further down in the drop down menu, I also succeed when clicking somewhere on the table cell. Can you help me with this? Thanks a lot in advance!
(13.01.2006, 08:46)

Throwing A. Pie:-
I am truly impressed. Thanks for making a Java-free drop down! You rock!
(13.01.2006, 12:43)

Bernie, I hope the new layout example helps with all your problems. All the menu links work, including the menu top lines.
(14.01.2006, 16:28)


I've been looking for a pure CSS drop to put on my MySpace account. For some reason though, it didn't like the code. But with tweaking and grinding, I eventually got it on there. It was my first time working with code, and man was it a blast!
(18.01.2006, 13:49)

Stu: I'm running the code but for some reason when I look at it from IE6 it's showing up vertical, I copy/pasted the style code you have on the demo page and still no dice... what could be happening here?
(19.01.2006, 14:33)

JR, not sure without seeing the problem. The float:left; does the job of putting the links inline.
(19.01.2006, 21:17)

Sunil Kumar:-
Mr. Stu,

I saw your menu samples and they are wonderful. Especially, the cross browser compatible drop down menu. Is it possible to create similar drop downs only which go more levels deeper (maybe 3 or 4 levels)?

Thanks and Great work!
(25.01.2006, 22:08)

I can't get the dropdowns to appear in Firefox. Not sure what I'm doing wrong. I have outer and inner divs within the noniemenu div. Any ideas?
(06.02.2006, 13:48)

Ok, fixed that. Didn't have the <html...> tag that was needed. But in IE it filling from the left, but starting in the center. Can't seem to align it left. Any ideas?
(06.02.2006, 15:56)

Rik, do you have a url?
(06.02.2006, 16:03)

(06.02.2006, 16:49)

Well, "" actually.
(06.02.2006, 16:50)

Rik, Both Firefox and IE look the same (except for the missing last menu item).
Which text do you want aligned left? at the moment it is all text-align:center;
(06.02.2006, 17:26)

I looked at your cross-browser drop down menu and it really looks great. I want it to display multiple levels (sub-menus). I would really appreciate it if you would describe the technique to implement that.
(07.02.2006, 21:00)

Sorry stu, I managed to fix most of the problems I was having in the end. They weren't hiding properly (can't remember why) so I was getting both menus in IE.

I love this menu system, but is there any way to make it central?
(08.02.2006, 13:26)

Rik, if you know the width of the menu then you can enclose it in a containing div and make that central using margin:0 auto; for instance.
(08.02.2006, 14:21)

This worked perfectly. You are a genius! You will definitely get linked to from my site! :)
(08.02.2006, 16:00)

Actually, worked well in Firefox but not IE. Can you see what I've done wrong?

(08.02.2006, 16:01)

My fault - fixed. You still rock! :)
(08.02.2006, 16:07)

For all the visitors who have asked....I have added a single level cascade to the DEMOS menu to show the way. Also changed the FF menu to unordered lists. Hope you like it ;o)
(08.02.2006, 19:44)

"Opera doesn't like the Googles ads and will put the drop down menu beneath them no matter what z-index is used. But I need the income so the ads stay ;o)"

Talking about the Google Ads, in IE7 Beta 2 they are all gone in every single page of this web. Nowhere to see.
(08.02.2006, 20:48)

Andrei, at the moment IE7 should use the object tag to show the ads, which is the same as for Firefox etc. It could be that you have a pop-up blocker switched on in IE7 which may stop the javascript routine in AdSense from showing.
(08.02.2006, 21:03)

You were right!!!
(08.02.2006, 21:39)

Ricardo Carrasco (gmn17):-
This is great work!, I am going to use this menu on Myspace!
(14.02.2006, 16:07)

Hi Stu. Do you know if this menu works with Safari?
(16.02.2006, 12:13)

hi stu, i am using your menu in my project. But i have a problem. Both ie and firefox shows submenus under the form controls. if i hover the mouse over main part the submenus goes under the form elements. how can i achive this problem. thank alot in advance
(18.02.2006, 15:05)

This menu is awesome. I'm wondering, could you also make a vertical version, with horizontal menu popping out? For left/right side navigation. Also, love your work, you're a genius. :)
(23.02.2006, 20:55)

Oh, and if you'd like, and have the time, you'd be very welcome (everyone here in fact) to join the w3schools forum. Don't know if you've seen that tutorials site, but the link is
(23.02.2006, 20:56)

Jonas, a vertical version coming SOON ;o)
(24.02.2006, 08:44)

Cool. :)

And I see you joined. I'm sure you'll be a great asset to the people on that forum if you indeed have the time to help. :D
(24.02.2006, 11:40)

Jonas, joined to put Eric straight ;o) but I will see what time I have to spend there. Also belong to CSS Forum at but haven't contributed there for some time. Anyway, the flyout menu now exists at enjoy...
(24.02.2006, 20:43)

Jonas, joined to put Eric straight ;o)

I don't understand how you found that topic so fast, it hadn't been posted in since february 1st. ?:|
(26.02.2006, 01:14)

Jonas, I just did a search on CSS PLaY to see what members thought of the site.
(26.02.2006, 09:42)

Stu, Are you interested in getting paid to make this standards compliant? We will use it in our xhml site generator?
(05.03.2006, 02:28)

Bob, I am not sure how anyone could make this 'standards compliant' as it uses nested links and tables in links for IE. Other than playing with the !doctype, which I have done and is allowed, there is no other way. Once the validator catches up with the fact that you CAN change the !doctype then it WILL validate. At the moment the w3c validator says it fails validation with zero error. Can you email me stu{at} with more details? I am just about to upload another use of tables nested in links.
(05.03.2006, 08:44)

.....but wait, I have an idea. The page I am working on has nested tables and I think it will validate!
(05.03.2006, 09:29)

1) In IE 6.0 on Windows the URL in the status line does not change on submenus. It does change in Firefox on Linux.

2) In Firefox on Linux the menu moves down, overwriting text, when you increase the text size in the browser. It does not do this in IE 6.0 on Windows.
(05.03.2006, 10:25)

Mike, I have IE6.0 on Windows XP and the status line changes on all the links including the sub menus. Unfortunately I am unable to test on Linux.
(05.03.2006, 18:59)

@Bob, much? ;o)
(05.03.2006, 21:56)

John C:-
The DROP DOWN menu breaks under IE6 when using the inner second, inner classes.
It fails on this demo page as follows. Hover over DEMOS then HOVER/CLICK and click on a submenu, such as 'styled form'. Then back arrow to the previous page and again hover over DEMOS then HOVER/CLICK but the submenu disapears when you try and select.
To restore you need to hover over DEMOS, click on HOVER/CLICK and then back arrow to come back to the page. You can then select the submenu. It appears to be an issue with 'visited' I assume.
(13.03.2006, 00:04)

John C, this works ok on my version of IE6, however this menu is now superseded by the new MKII version which is esier to style and maintain.
(13.03.2006, 08:14)

great site Stu! I was looking at your "CROSS BROWSER TABBED PAGES WITH EMBEDED LINKS" (btw, you misspelled embedded =P) section. It was exactly what I was looking for HOWEVER it doesn't work on Myspace?? The NO DOCTYPE issue!! Bummer! Any other way? Please!!???
(02.04.2006, 02:32)

Very good site.
(17.05.2006, 11:35)

I want to use the magnifier menu on one of my pages, but I dont know the html and coding to get it on my page. And I could put my own images right?
[If you don't mind could you please email with help at]
(14.06.2006, 17:27)

Tim Hanko:-
I'm missing something here. I love the way these menus look but I can't get the top level menu buttons to align horizontally. This is with the dropdown.txt file off the web site and the one I created.

Otherwise, it's great.
(19.12.2006, 04:30)

Tim, in your main css file you have
li {width: 800px;}
This is affecting the .menu li width
(19.12.2006, 09:14)

this site is amazing
(30.12.2006, 22:00)

ultimate css codes! inteligent work
(07.09.2007, 14:01)
I tried IETESTER this menu and works fine in 5.5, 6, 7 and 8 IExplorer versions .
But the NEW MKII Version don't work in version 5.5 of iexplorer.
Anyway thank you very much is a very good job.
(01.06.2009, 17:30)


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