Mobile Friendly Website


Doing it with style

basic drop-down 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

Marco De Luca:-
Just wanted to let you know, that this menu also works on Mac with Safari 1.3.2 and Firefox 1.0.4. It does not work with the (outdated) IE 5 for Mac. About IE7: the ad below seems to be on a higher layer and covers part of the menu. See screenshot:
(20.03.2006, 20:07)

Thanks Marco, I have added the Mac browsers to the list. IE7 should be ok now. The conditional comments for the Google ads did not include IE7. This has been corrected so it should now cover the ads.
BTW IE7 will use the li:hover to display the menu.
(20.03.2006, 20:16)

Marco De Luca:-
Sorry Stu. It's still the same with the ads in IE7. I made sure I emptied the cache before I tried.
(21.03.2006, 09:17)

Marco, that is very odd then. It may be something to do with the z-index. Once IE7 is official then I will investigate further.
(21.03.2006, 10:02)

Marco, it may be ok now.
(22.03.2006, 10:08)

I couldn't use the CSS Drop Down Menu. I don't know why. The menu showed as bullited list.
(26.03.2006, 10:53)

salwa, if you just get an unordered list then you are not linking to the style sheet(s) check that you have the correct path to your css style sheets.
(26.03.2006, 15:23)

Hi i think this menu layout is great! thanks!
i just have one query... i want to include the menu in an iframe and use it on multiple pages so i don't have to include the same code. But the overflow doesn't seem to work! i have tried using a lower z-index value for the container page, but still its elements appear in front of the menu overflow from the iframe.
is there a way to fix this? thanks!
(26.03.2006, 21:35)

Fadil, I haven't tried this in an iframe, but from what you say it looks like it doesn't work. Why not use php or ssi?
(27.03.2006, 08:20)

Hello again! The SSI method works like a charm!
Thanks so much! I'm learning about these at the moment, I am a university student. I'm currently developing a webpage in ASP/VB Script, and just learnt the benefit of SSI!
I will now certainly be using the menu in my project, and you can expect a link to CSSPLay!
(27.03.2006, 17:45)

I would love to see this work with a combination of one-line and multi-line links, both vertically alilgned to the middle of the box.

Great site, great work, thanks for sharing!
(04.04.2006, 16:19)

Hey Stu,

Thanks so much for the basic drop-down menu. I'll be using it on my personal site, I'll send you a donation later next week when I get my paycheck. Just wondering, how does one reduce the space between the submenus that drop down?

You're a great inspiration, thanks!
(15.04.2006, 03:25)

Hello stu, your site is excellent rich with lots of resources, thank you! i am using the basic drop down menu on my site. I am also including a link back to CSS play. cheers
(15.04.2006, 04:48)

hi stu,
its noni again, the one who is using the basic drop down menu, it works great on Firefox but not on IE6. Would you know how to solve the problem, hope to hear from you, thank you and regards
(19.04.2006, 03:02)

Noni, the usual reason in a non compliant !doctype or an xml declaration that throws IE into quirks mode.
(19.04.2006, 08:14)

Interesting problem on Firefox 1.0 for Mac and recent (common) versions of Firefox for PC... when you pull down, say, the MOZILLA dropdown and scroll down until your cursor is just over the ad at the bottom, as soon as it touches the border of the ad the dropdown collapses. Any ideas how to fix this? Tricky one . . .
(08.05.2006, 14:35)

Thank you very much for your great menu. When I add background images to the 'a' tags via CSS your menu works in Opera and FireFox on Win XP. But in MSIE the submenus do not open any more. Do you have an idea why? Thank you very much for your help.
(26.05.2006, 11:13)

Pretty impressive stuart.. I also notice you've totally redesigned the site.. Now it is full of Google ADs, and really annoying gif files that keep shouting messages at me when I'm trying to enjoy your work.

So you are officially a sell-out, but your work is fantastic!
(16.06.2006, 06:38)

A little nitpicking:
The CSS entry for .menu :hover will also highlight the table if I highlight an anchor in the dropdown.
In Firefox this will show the table as a 2x2px block just left of the dropdown.
(04.08.2006, 10:37)

Hi Stu

i been playing with this dropdown menu and figured out a way to have the primary menu items in different sizes and still keep the sub section a fixed width. works in the same browsers.

i dunno if you have done this but i been looking and i cant find it. if your interested let me know. i'll check this comments blog regularly
(24.08.2006, 03:26)

Jim, it has always been possible to change the width of each drop down menu and several of my examples use this feature.
(24.08.2006, 22:02)

Oh.. sorry i obviously havent looked properly..

which one is it?
(25.08.2006, 01:34)

Jim, this one for instance has wider sub levels
But you can also style all top level widths to be different as well as sub levels, it is just a case of 'combining' styles.
(25.08.2006, 12:51)

Hi Stu,

I am trying to use the basic drop-down menu on a quirks-mode page (sorry, I can't change to standards mode because of other parts of the page).

It works just fine in IE 6, FF 1.5 and Opera 9, but on IE 7 RC1 the submenus won't drop down. After changing the conditional comments (to make IE 7 behave like IE 6) the submenus will show when the cursor is over main menu, but the submenu will hide as soon as the cursor moves over it.

Do you see any way to fix this?
(28.08.2006, 14:01)

Condor, I do not have IE7 yet so cannot suggest a way to overcome this. As soon as IE7 is out of beta I will get an update and go through all of my examples to make sure they work in this version.
(28.08.2006, 15:15)

Thanks for the quick response.

Actually, IE7 is out of beta. The first release candidate can be downloaded from:
(as you can see from the URL Microsoft already considers IE7 to be its main browser)

For details on CSS changes see:
(28.08.2006, 17:00)

Condor, I have put iE7 RC1 on one of my PCs and to my amazement only a handful of pages do not quite work. I have corrected two so far and will go through the others in due course.
With your problem make surer that there is no gap between the top menu items and the drop down list.
If there is the then :hover will be lost and the drop down menu will close.
(29.08.2006, 21:20)

Hi Stu its Jim again.

(for Safari only) would you know why this menu doesnt work over a flash object? i have a flash object as a header in Safari and it all work well until i rollover the sub menu. it acts all funny and dissapears one by one as i rollover items.

i presume its a flash embeding problem but thought you might know somthing of this issue?
(18.09.2006, 07:18)

I love your site!
There are so many great ideas.
I'll be glad to donate.
However I cannot get this menu to work.
I took it and edited it for my site and it worked great in ie6. But it wouldn't work in mozilla or netscape.
So I tweaked it and now the menus won't pull down in any browser.
I created a separate css file and linked to it so I could be sure there wasn't a conflict. Still no help. I copied the html verbatim into my webpage and the dropdowns don't work.
Any thoughts?
(17.10.2006, 03:46)

Wow! Just found your site and love the drop-down menu. I've tried to get it to work on my blog but haven't had any luck whatsoever.
I viewed your source page and copied the code embedded within the header section but it didn't work. Perhaps I didn't copy enough of the code, inserted into the wrong spot, or need to further tweek it...

I could really use some more specific instructions. I've searched the web for other tutorials but haven't been successful with that either.
(12.01.2007, 08:37)

How would you put rounded corners on the menu? I modified ".menu ul" to read:

margin-left: 15px;
padding-left: 8px;
background: url('half_left.gif') bottom left no-repeat;

Which didn't work. Any ideas?
(20.06.2007, 20:30)

James Chapman:-
Hi Stu! Your site has been a huge help to me. Thank you! Like Jim, I also seem to have a problem with IE7 on my site's drop-down for this particular menu, however and the big ???, is that it works on your site and not on mine and I copied everything accordingly. If you can see something I don't I would very much appreciate any help. Thank you!
(19.07.2007, 17:14)

James Chapman:-
myparkphotos com
(19.07.2007, 17:14)

James, you will need a standards compliant doctype, see my FAQs for the list url.
(19.07.2007, 18:54)

Hello. I am trying to remove the label tabs from my blog but can't seem to remember what part of the code to delete. I've only been partially successful (the labels are still at the top of the main body but are bulleted rather than folder tabs). I'd like to remove them completely (as I have so many, it isn't appealing to me). Can you please take a look at my source code and thereby point me in the right direction?? Thank you! :)
(31.12.2007, 16:52)

Oops...never mind. I figured it out! Sorry to have bothered you... I shouldn't hunted a little more.

Thanks again though for all your help. :D
(31.12.2007, 17:12)

Hi Stu, I'm impressed with all the great work you've done creating CSS-based menus.
I tried separating the CSS from the content in the basic drop down, as I prefer to link to CSS as external files. However, I'm having problems like misalignment of the submenus (IE & F/fox), and appearance of the bullets (only in F/fox). Can you explain why cutting and pasting the styles into an external file doesn't work the same way as having the CSS embedded?
Just to be sure I didn't mess something up in the process, I copied the contents of the external file back into an HTML page and removed the CSS link tag, and it works perfectly.
(17.04.2008, 00:07)

Is my face red!!??
I forgot to remove the <style></style> tags from the embedded code before saving as an external file. D'uhh.
All working perfectly now ;-)
(17.04.2008, 00:44)

I have a question about the dropdown menu, well the css conditional comments connected with the dropdown.
As i understand the code for the dropdown, you use conditional comments for IE 6 and 7, and thus it will only read the </a> tag in IE 6 and 7 because the </a> is inside a conditional comment.
Shouldn't the lack of the </a> be a problem for some browsers?
Also shouldn't we also put another conditional comment in for not IE6/7 to give other browsers a </a>.
Also i'm further wondering shouldn't a html validator complain about the potential lack of an </a> tag, or is it just trained to be happy because it exists inside of a comment, or is there something i'm missing about conditional comments that make things peachy?
(20.07.2008, 03:33)

Sirus, what you are missing is that the </a> is inside CSSplay 'special' conditional comments not a standard MS one, and is in fact seen by ALL browsers except IE6 and lower. This 'special' conditional comment does validate. See for more information. To be future proof you should change 'IE7' to 'gte IE7'.
(20.07.2008, 08:33)

i had already read up about conditional comments, but i had forgotten something about comments

(21.07.2008, 00:46)

Hi, I would know how to center the menu.
Currently I have it aligned left, but I increased the size
the container and is moved to the left, but
I would like to stay focused on the page.

Thanks and regards.
(07.12.2010, 08:57)


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