Mobile Friendly Website


Doing it with style

Definition list 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

Gustavo gavan:-
Great stuff

could it be possible to have this with nested items like

Painting 1
Painting 2
Painting 3
etc.. with different format for the Level 1 (painters) & Level 2 (painting)
(11.05.2004, 17:17)

Kevin Francis:-
Great site by the way.
Perhaps you can clarify a potential accessibility problem I've encountered using definition lists for menus.
I go to lengths to make my web pages accessible and perform manual checks against the WCAG 1.0, a client of mine seems only interested in a AAA Bobby badge. My opinion is - the objective is accessibility, not a Bobby badge!

The problem is when I run my test page through Bobby

I recieve the error message;

WAI checkpoint 10.5
Separate adjacent links with more than whitespace.

Bobby recomends marking up my menu with ordered list to rectify the problem - what is wrong with definition lists?

If I use an unorderd list and H2 for menu titles then I do not get this error, possibly because unordered lists are bulleted when css is removed/not supported therefore acting as a link speration character. As definition list a not bulleted by default could this be the problem?

I'm very interested to hear your thoughts on this white space bug. Is it just the usual Bobby problems, or has Bobby actualy got it right for once.

Kevin Francis
(05.08.2004, 06:52)

Kevin Francis:-
how do I find your reply to my comment?
(05.08.2004, 06:55)

:) you find your reply here.
Bobby likes to see a separator character between links and as definition lists do not automatically add the character then you should add it yourself (if bobby approval is a must).
To do this just add a <span class="xyz"> | </span> to your links then use the css .xyz {display:none;}. This will add your separator for non css browsers but hide it for css based browsers AND keep bobby happy.
(05.08.2004, 19:21)

Manuel Flores (sv):-
Hey these sites is great... and the menus are helful not for example but for learning to manipulate css....
(01.02.2005, 16:28)
I just worked through you definition list menu courtesy of WebReference Update and hats off to you Stu. I would like to use this on my own site, customised to my house style.

It's excellent!
(09.05.2005, 20:11)

That's what it's there for, modify it as you want.
Perhaps you could post the url when it's done as I would like to take a look.
(09.05.2005, 20:27)

Regarding the example as seen on <>

When doing two links:
How about making the <dt> float to right (51%) and the other <dt> float to left (49%)
and underneath the same way each the <dd>s

any ideas
(10.06.2005, 12:27)

t work. I published it out to my host and tried it this morning and it works. Great technique stu. :-

(15.06.2005, 13:51)

Ray, multi-level menus are only possible in browsers that support :hover on all tags OR using javascript. I'm afraid that this rules out a css only cross-browser method.
(15.06.2005, 17:24)

Gary Badger:-
Hi Stu, What am I doing wrong here? I am trying to learn by editing your menu from, and when I edit the <dd><a href="#".... line by changing the # to a URL (eg "about.html") I lose all the lovely formatting. I change it back to a hash and the formatting returns. I'm sure the solution is obvious, but I just can't see it for the life of me. I would be grateful for your guidance!
(16.06.2005, 05:46)

Gary, changing the href="#" to href="about.html" should have no effect on the style. Make sure that you have not deleted any part of the link and that it looks like this <dd><a href="about.html" title="Paul Cezanne">Paul Cezanne</a></dd> for example.
(16.06.2005, 07:35)

Right you are, Stu. I hadn't realised I changed something in the CSS. Many thanks!
(16.06.2005, 07:44)

John Mes:-
Wonderful, educational work, thanks for making it available! One question on the definition.html list, though: why use .gifs for styled corners & arrows when 'snazzy' (CSS only) borders could be used? Not from a 'purist' perspective of course... :-)
(03.07.2005, 16:11)

Hi Stu. I used your menu and it got a lot of attention. I was asked to write a tutorial about 'how to', which I just did, and gave you heaps of credit. Thanks as always!
(28.11.2005, 10:27)

Just found your site a few days ago and am loving all the fun ideas here. What a great idea to build a menu using a definition list! I'm wondering, is there any way to turn this into a drop down list that appears only when you mouse over the definition term at the top? I have been able to hide the lower part of the list using dd{display:none;} but no permutation of :hover that I've tried makes them reappear. What am I missing?
(07.03.2006, 21:10)

Virginia, if you are using Internet Explorer the :hover will only work on links so you would need to enclose the list within a link and then hide the dds using either visibility:hidden; or display:none; to make them re-appear you will need to fisrtly style a:hover then style a:hover dd.
I have used a similar method on unordered lists to produce my latest drop down and fly out menus.
(07.03.2006, 21:17)

Binu Mathew:-

I like this. A big thank you. I was told that CSS is better, but didn't know how to use it in website. I was looking for samples and I got it from your site.

Thank you very much...
(06.08.2006, 11:05)

Have you made a horizontal menu that looks like this one? I'm trying to locate a CSS horizontal example of a menu where the four corners of the entire menu are rounded, but the individual menu items are not. Does that make sense?
(15.10.2009, 18:12)


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