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

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)

10 of 21 comments (part 2). [ « ] [ » ] [ * ]


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