Mobile Friendly Website


Doing it with style

A dropdown menu with overlap 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

Tim, just change the ul background to transparent.
.menu ul {padding:0;margin:0;list-style-type:none; height:3em; background:transparent;}
(22.12.2006, 14:33)

Hi, thanks for all the tips...
I agree with Paul, there is a problem with <SELECT> input forms in IE (thankfully it's fixed in 7) but for the time being we still need a hack for this. The select ignores z-index and shows above everything in the page, so the menu appears beyond any dropdowns in the page...

Please help!!!
(25.02.2007, 01:55)

Hi! So, there is a hack for the <select></select> problem in IE, that doesn't support z-index and overlaps the menu? I hope there is something... There are a lot of people that are using IE 6, including myself. I also use Firefox, but we cannot ignore IE 6 users.
Your work is really great, Stu! God bless you!
(26.02.2007, 23:15)

Can some one please post a example? I followed Paul's explanation and couldn't get it done. It would be highly helpful, if some one can paste the code or point to an existing site/example.

Many Thanks
(11.03.2007, 19:02)

Does this dropdown menu support safari on mac?
(16.07.2007, 17:22)

hi stu, sorry to say this menu does not work on safari on mac . Any solution for that?
(21.08.2007, 21:27)

rupnarayan, I am unable to test on a Mac, but Safari (PC) works fine. Does the next menu in the series cause problems on Safari/Mac?
(21.08.2007, 21:35)

hi stu, sorry I am late to respond, I tested it in mac and pc both, working fine now, may be the trouble was something else, sorry for the trouble.
(30.09.2007, 19:33)

hi stu, i think this is the best css menu out there, just that it seems the only issue is with the menu appearing under 'select' form elements. You might frown upon including javascript into your menus, but here's the quickest/simplest approach I could find to troubleshooting this problem (instead of using iframe shims, etc...):

onMouseOver="document.getElementById('IDNameOfSelect').style.visibility = 'hidden';
" onMouseOut="document.getElementById('IDNameOfSelect').style.visibility = 'visible';"

and adding an ID tag to the offending 'select' form element:

<select id="IDNameOfSelect">

The other issue is that it does not include a conditional for IE6 & below.
(08.10.2007, 21:57)

Stu: I've looked at many of your menus and settled on this one. Right up front have to say I'm a novice CSS user so my first question is going to probably be elementary.

I've copied the code to my master.dwt (I'm using Expression 2) Have figured out how to do many things, but the one that is puzzling me the most is all the drop downs or submenus are transparent. What and where can I change the setting in the style sheet so that they aren't opaque? All for now and hope that makes sense. Thanks much,
(20.08.2009, 22:38)

10 of 24 comments (part 1). [ » ] [ * ]


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