Mobile Friendly Website


Doing it with style

A refined dropdown menu 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

The mixing of IE hacks in the "main" CSS and a conditional comment CSS section for IE6 is rather confusing.
With the release of IE7, Would it not be better to make full use of conditional comments to move those hacks out of the main CSS?
(21.10.2006, 18:02)

Chris, the problem I have (and probably many other people) is that I run standalone versions of IE5.01 and IE5.5 as well as IE6 and IE7 and conditional comments will not work on IE5.01 and IE5.5 as they are interpreted as IE6. So I have to use hacks for testing purposes.
What I have now done is to remove the conditional comments and use the table styles to separate IE5.5 and IE6.
(21.10.2006, 19:51)

That makes sense.

One could argue that you've done enough of the hard work and that if the consumers of your work want more (like perfect Condition Comment-ism) then it's on them.

All I gotta say is- thank God MS doesn't make water closets.
(22.10.2006, 14:19)

Hi. Great job with this menu. I'm just starting to study some of your ideas from several of your demos.

My question:
I am unable to locate the specific line (or lines) which allows the mouse to "float" below the drop-down menu (approximately 40px on my screen) before the menu collapses.

All the style sections have detailed comments. Did I miss something when I copied & printed the source?

Thanks for the info. Jeffrey
(09.11.2006, 17:09)

Jeffrey, its the padding bottom in the style
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
The transparent image is necessary for IE to 'show' the bottom padding.
(09.11.2006, 17:55)

Thank you for your prompt response. Must be late over in the UK. (It's lunch-time in Lincoln, NE, USA.)

I also found a reference in your ':hover craft' tutorial regarding "display:none;" vs. "visibility:hidden;" that I thought might be the key... glad to find out it is the padding & a transparent gif.

I look forward to the continuation of the ':hover craft tutorial.'
(09.11.2006, 18:18)

Where should one set the z-index so this draws over other items on the page?
(20.11.2006, 19:35)

Tim, give the .menu a positon:relative; then you can apply a z-index to it.
(20.11.2006, 20:13)

Ivo Trompert:-

First of all great website. But I have a problem to use this menu on a site. All browsers (I check on Firefox IE 7 and Safari) working correct. only on IE 6 (and below) it is a mess.

Can you (or some one else that reads this command) pleas take a look at my website. Because I don't no what I do wrong. The website is:

And how can I position your menu whit the absolute position method?

Thank you for your help,

Ivo Trompert
(12.01.2007, 23:51)

Ivo, your site is password protected so I can't see the problem. But if only IE6 is causing problems then it is either a non-standards compliant doctype or you have incorrectly positioned the conditional comments in the menu html.
(13.01.2007, 00:03)

Hey Ivo, you may changed something but I tested your site an it looks perfect, tested with FF2, Opera9.10, NN8.1.2 and IE 6 on WinXP Home SP 2
(15.01.2007, 18:18)

Hello Stu,
I just use one of your menus for the first time and its amzing!
But I have a problem with this menu, the dropdown looks strange in IE6 if a select-form is under it.
Couldn't test this with IE7 until yet but FF2, Opera 9 and NN8 are working as I want.

If you want to take a look you can see my problem at this demo page:

Hope you or any other user has a solution, I dont know how to fix it.

Bye Jason
(15.01.2007, 20:26)

Jason, nice looking implementation. Unfortunately you have found the IE5.x and IE6 bug. Select will ALWAYS be placed on top of any other element no matter what z-index is applied. This applies to other drop down menus as well as the ones on CSS play. There is no way round this except to move the selection box or not use a drop down menu.
(15.01.2007, 20:48)

Hello Stu,
excellent site you did! I was implementing "final_drop4" and i noticed that it only works with a proper DOCTYPE tag in the beginning of code. Without it (old site) it doesn't show anything.

Should I change doctypes on all pages or is there an easier solution?
(17.01.2007, 15:46)

I have a web page where i display a select box under a simple drop down div which will display another container on mouse over.
Problem is when the continer get displayed on mouse over i can still see the select box.container look like a transperent with select box..
but if i have any other element insted select box its working fine..
I tried to set zindex also its not working..
my code is some thing like this..

<div onmouseover="showdropdown();" onmouseout="hidedropdown()" >this is a drop down</div>

Can any body please help me to resolve this problem in ie6.. in ie7 its working fine..

Thanks & Regards
(02.05.2007, 09:31)

sankar, this is an IE6 bug for which there is no workaround. Any drop down menu would have the same problem. IE6 places the select box above any other page element.
(02.05.2007, 20:49)

Great menu but when i put a margin of 1px for the top links it shows up as 2 pixels in ie and is there a way to fix it when i hides under something that is positioned relative on my page
(27.06.2007, 15:56)

Wayne M.:-
In the Maxthon browser, submenus at final_drop3.html float above the main menu as page is zoomed to larger size.
(26.07.2007, 14:31)

Great menu! Is there anyway to get the menu centered on the page? Rather than off to the left? The right area is blank area, I'm not sure how to get rid of that and/or move the menu to the center.
(26.07.2007, 23:54)

hi stu,
this is not my job but I really appreciate your work! I'm renewing my site and have a problem with drop down menu: the submenus open "under" some text, which is positioned under the menu! I think I need to bring the menu to a superior level but I can't do it.

thanks for your help
(29.07.2008, 13:21)

sabrina, make the following changes:
#navigation {
position: relative;z-index:10;
top:101px; left: 213px;
#content {width: 584px; height: 429px; overflow: auto;
position:relative; z-index:1;
(29.07.2008, 15:36)


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