Mobile Friendly Website


Doing it with style

Variable width Drop down DL 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

Larry Constantine:-
Great, clever CSS. But. I am struggling with combining your menus with your layout. Cannot plug Variable widthe dropdown DL into head of 3-column liquid layout without it falling apart in Mozilla (OK in IE). There's a float:left logo image and float right strapline in the head, too. Secrets? Suggestions?
(01.01.2007, 03:31)

Stu, you're the greatest CSS resource that I've found. I'm relatively new to CSS, and have learned a lot here.

The variable width drop-down was nearly exactly what I was looking for. How hard would it be to add flyouts for more levels.
(19.01.2007, 20:57)

Jerry, it would be impossible to add flyouts for more levels on this menu. You will need to look at the unordered list only drop-down menus.
(19.01.2007, 21:57)

Stu- I really like this menu but is there a way to have on some buttons a hover over without a dropdown. For example "home", I don't need any dropdowns,just the link.

(11.03.2007, 06:11)

Stu- Great menu, it has been a huge help to me.

Just wanted to let you know I have discovered a bug with it in Opera. If there is a forward slash (/) in a top-level link it breaks that menu item in Opera 9. It doesn't seem to pose a problem for IE6, Firefox, or Safari. Got any idea what is causing this? I also tried using the ASCII code for this to no avail (/).
(31.07.2007, 16:02)

Beautiful Menu! I think it will work out perfect for my website
(08.08.2007, 18:42)

Lucas from Hungary:-
It was a big surprise for me to face that this kind of menu is such a unique kind that only you did make it.
Big up for the use of declaration-list! Also the CSS is easily styleable. Great!

Sad, that if all <dd>s are shorter than the <dt>, then clicking outside the text their bg (even the bottom-line) makes their bg and clickability collapse.

This happens to me when I download YOUR PAGE...

I don't know if it's related to the DTD or something like that... I would really appreciate a good idea about that!

Thank you!
(05.11.2007, 20:51)

Lucas from Hungary:-
Sorry.. I mean, your demo is OK online, but fails when I download it. Same issue with my styled instances in FF. Testing goes with XAMPP.
OK, my main goal was to make my menu accessible to IE users (usually still v6), but for God's Sake, why to degrade a standards-compliant browser?
I don't know where's the glitch...

(In the meantime I read you were starting with the Z80 just like I did in my childhood! With my stepfather we were converting tape-loader routines to floppy-disk loaders in games like Winter Games, just for the challange, but our main favorites were Trap-door, The Sentinel, Deus Ex Machina as I can remember so far...)
(05.11.2007, 23:30)

Lucas not hungry:-
Sorry again, I was a bit confused last night.
To clear it: your downloaded demo works well. I can even change the menu between the <ul> tags with my own - it still does.
My question then: what may cause that the area in the dropbox around the text isn't linking - after a click inside the dropbox but not on the text itself (even on the bottom-line) leads the background to collapse to the clickable area of the text.

Excuse me again for the confusion before!
(06.11.2007, 21:26)

Yet hungry Luke:-
Yes, after a few days of testing my conclusion is that this menu is only working in the environment of your site's other CSSs.
In my example I make a new page in MODx CMS, assigning no template to it, copying your page's code to content is wrong.
Seeing the same page after copying your sites other css-files to their place makes the menu work. Form me this means the menu isn't good in other environment than yours.
Or not?
(17.11.2007, 22:19)

This menu will work on any site that has a standards compliant doctype. Make sure that your DTD is chosen from the list on
(17.11.2007, 22:37)

I have stripped this down to the CSS and html for the demo only and placed the result here .
You will see that this works without and extra styling. All that is needed is a standards compliant doctype. The font size and type can be varied as you wish.
(17.11.2007, 22:43)

Parker Crawford:-
Is there a way to center this menu? I wrapped it in another div but still can only center it using margin.
(20.11.2008, 15:11)

The fact that it has a variable width makes it difficult to center. It can be done using display:table and display:table-cell but this is buggy in Firefox. IE would need to use display:inline-block;
(20.11.2008, 15:40)


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