Mobile Friendly Website


Doing it with style

drop variation 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

Roger Myles:-
Stu, A very interesting site which I came across via a google search. Like you I am 59 but redundant, spent many years in the telecomms industry, now trying to scratch a living doing computer things. I have a family history site (which I will not bore you with) but the idea was to learn XHTML and CSS (which I have a bit). If you do'nt mind I will take my learning to the next level using your expetise as shown in this site.
(23.04.2006, 18:09)

Roger, that's what this site is for. Good luck with whatever venture you undertake.
(23.04.2006, 18:47)

Hey Stu,

About your Drop Variation, can you make a second sublevel work for IE.

I aded this to my css:
for non ie:
#Menu ul li:hover ul li ul {display:none}
#Menu ul li:hover ul li:hover ul {display:block;position:absolute;left:96px;top:-9px;width:96px}
for IE:

#SEOMenuH ul li a:hover ul li a ul {visibility:hidden;position:absolute;height:0;width:86px;left:89px; z-index:99999}
#SEOMenuH ul li a:hover ul li a:hover ul {visibility:visible;position:absolute;top:-9px;color:#000;left:89px; z-index:99999}

this does work in all browers for a 2nd and up levels but not for ie it will not show more than the the first hover which shows the first drop down
(01.05.2006, 01:22)

Hey Stu,
Sorry about the miss typing, here is the actual add.

About your Drop Variation, can you make a second sub-level work for IE.

I aded this to my css:

for non IE:
#Menu ul li:hover ul li ul {display:none}
#Menu ul li:hover ul li:hover ul {display:block;position:absolute;left:96px;top:-9px;width:96px}

for IE:
#Menu ul li a:hover ul li a ul {visibility:hidden;position:absolute;height:0;width:86px;left:89px; z-index:99999}

#Menu ul li a:hover ul li a:hover ul {visibility:visible;position:absolute;top:-9px;color:#000;left:89px; z-index:99999}

this does work in all browsers for a 2nd and up levels but not for IE it will not show more than the the first hover which shows the first drop down.
(01.05.2006, 01:25)

Thanks Ben, but a second level menu is already on this site (
I just decided that this one only needed one level.
(01.05.2006, 09:11)

No problem Stu
(02.05.2006, 00:36)

... I am a bit speechless. Nobody can beat this. It is even better than to javascript dropdowns... Only problem is that my site has WCAG AAA conformance. And I plan to keep it that way. So I must seek a way to make this one device independent. But how?
(02.05.2006, 18:38)

I have the solution! Making a stylesheet switcher enables me to disable the stylesheet, and then it becomes device-independent!
(02.05.2006, 18:40)

Hey Stu - thanks for your great work. I'm really trying my best to work with the "drop variation" code you've created.

Basically, I'm using as my photo sharing site which you can costomize to taste. However, I have only ONE spot to put my costom css code. So I don't know how I can use the code you've provided in the "drop variation" example since it requires TWO costome .css's.

Obviously I want this to work on all browsers (or as many as possible) is there a way I can do this with access to only one location for a custom css code?

Thanks for any help you can (and have) offered.
(12.05.2006, 01:30)

Mike Lane:-
Stu, I noticed that your xhtml for your variations on a drop down theme for 17 April has the table, tr, and td elements not enclosed in the conditional comments like an earlier version of the drop down menu did. Was that done on purpose? If so, why? I was under the assumption that the purpose of the conditional comments was to hide the <a> element for the hover in IE and table elements for layout in IE.
(12.05.2006, 01:54)

Mike, this was done to remove the need for a double top menu item. On the menus where the table is enclosed in conditional comments you have the top level menu twice in the xhtml.
This, so I am told, is a problem for screen readers. These will see both items and read them twice.
The new layout only has one top level menu item and is a little easier to style.
(Again there is an error in the xhtml text which I will correct tonight.)
(12.05.2006, 08:19)

Mike Lane:-

Thanks for the response! I'm not so confused anymore :D

(13.05.2006, 15:46)

I'm trying to figure out how to make this slide up with the menu name bellow! Is there a simple answer to this?
(05.07.2006, 08:03)

I'm having a problem to get the transparency to work .. it has no problem working when I define the background as an image.. but this menu will be over text.. basically a div. How can I get it to overlay on top of a div? Great menu!
(13.07.2006, 00:13)

Ha, when I first saw the picture I thought it was one of those Visual Studio 2005 ads.
(20.07.2006, 17:41)

Hi Stu! Thanks for a great site. Quick question. I'm playing around with the drop variation menu. Thank you!

Alas it runs perfectly in ie6, but in ie7 for some reason the drop menu doesn't show up when you hover over the top menu items. Like I said it does so correctly in ie6. Ever seen anything like this before? Did I download the wrong files? Have I done something wrong? Any pointers much appreciated, otherwise I might lose some hair! =)


(22.10.2006, 11:04)

Colin, this menu works in IE7. Not sure what would stop it working. It uses the same stylesheet as Firefox etc.
(22.10.2006, 11:40)

Hi Stu,

Ended up being my bad =)...I didn't declare a DOCTYPE in the page. Thx! Once I did the menu works fine, although the the rest of the page developed some crazy wonky spacing issues. =) Guess I have to get with the times. ;) Thank you!
(22.10.2006, 13:17)

Hi Stu,
Great site!
I'm attempting to get my menu working for all browsers and I am having some issues with IE6.
After the menu expands and retracts it does not revert back to the background image, instead its just a blank white space.
I tried debugging but I cannot find me error, wanna take a stab at it?
(31.03.2007, 16:42)

Skyler Call:-

Check again. Stu has now made it so that only one css file is required. Good luck with your SmugMug account. I love mine!
(06.06.2007, 21:39)


Me and a friend been trying to add fly-out's to this menu, but haven't been able to make it work. Can you give us an example of how to make it work? Or is there some reason it won't work at all?
(26.09.2007, 22:32)

I'm in the process of developing a site for a client, and I loved your pure CSS drop variation menu. So far I have the menus working perfectly in IE7/Firefox/Safari. The menu by itself (see link below) displays fine in IE6, yet when it's dropped into the full site it no longer displays (again, see link below). There is a black gap where the menu should be, and only the wrapping div's background color is shown.

Any ideas?

Full site:

Menu alone:

If we can get this working my company will absolutely donate to your site. If not I'll have to use a (sigh) javascript drop down.

Thanks for your time (and your code), I realize you're a very busy person.

-Sean L
(15.11.2007, 16:34)

Sean, it looks like a z-index problem. Try giving the top level .menu a high z-index
(15.11.2007, 17:29)

Stu -

Thanks for the tip. Sadly, that didn't seem to do it. I tried z-index of 2, 500, 1000 on .menu. I also tried setting the other divs to -1. Nothing seems to work. Any other thoughts?
(15.11.2007, 20:13)

Sean, add width:800px; to the .menu style
(15.11.2007, 21:02)

Stu, that looks like it may have worked! Your time is much appreciated!
(16.11.2007, 13:44)

Stu, another quick question (maybe). Our designer likes what I've done so far, but he'd really like each menu item to be a different width. As it's coded now every menu item is the same width, he would like each to be as wide as the text (or image) within (the drop down's would all be the same size). How hard is it to accomplish this? Is this a simple css tweak or will I have to build separate classes for every button? How would this effect the IE 5.5/6 hacks?

Again, thanks Stu!
(16.11.2007, 16:48)

sean, just a small tweak to the css. Remove the width from the:
.menu ul li a, .menu ul li a:visited {
and add left and right padding instead to suit.
(16.11.2007, 20:50)


I am working on using this particular menu (great job btw )

My issue is I have :

/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {

Setup with a background image, however on my last menu option I do not want that background image.

I've tried setting up seperate classes and ID's but have had no luck.

I'd love to hear how you would accomplish this.

Thanks in advance
(12.06.2008, 22:24)

Hi Stu-

Please disregard my message, I solved the issue.
Just an inline style on the <a> tag will do it :)

(13.06.2008, 16:06)


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