Stu Nicholls | CSSplay | A css only dropdown menu

Information

A bit of a rewrite to 'hone' this to a bare minimum. I have now removed the double top level links from my previous examples and replaced them with just one link that is understood by IE6 and below to be a nested link and by non-IE browsers to be a standalone link.

How? Well it is possible to make Internet Explorer's conditional comments work for other browsers. In other words we can target non IE browsers with IE conditional comments. Fantastic!!

So non-IE browsers see the closing </a> on the top level links and IE6 and below see the the closing </a> on the other side of the table.

This works in IE5.5, IE6, hopefully IE7 (confirmation anyone?), Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Safari though not Mac IE5.x.

I have added additional features such as multiple line text and it stays in shape when the text is resized (although I have used a fixed width for this demo).

With this method I think I have finally reached the limits of simplification.

There is still the problem of drop-down under and object in some browsers but I think that this should be treated as a browser bug.

NOTE: If you have arrived here from 'www.grc.com/menu2/invitro.htm' then I should point out that their menu is almost a direct copy of several of my menus. The basis of their menu is the same conditional comments that I have developed for my menus as early as March 2006. One of which is a non-standard conditional comment to target IE7 and all non-IE browsers.

Cascading Style Sheet

22nd September 2006

Updated to incorporate my latest findings. The tables required for IE5.5 and IE6 have been moved into conditional comments so they play no part in other browsers. The dual styles for IE5.5/IE6 and all other browsers has now been combined by using just :hover in place of a:hover AND li:hover. Finally the hover state/path followed through the menu is retained in all browsers

Hope you like the improvements.

29th September 2006

An obscure IE6 bug has now been fixed with a restyle of this menu. After a top level 'link' is clicked the drop down menu sometimes did not drop down.

The xhtml

The xhtml code for the ultimate menu can be seen here in text format.

You will see that conditional comments have been used to hold the IE5.5 and IE6 specific version of the menu which used nested tables with nested links. The other browsers will not see the nested links and instead will use the normal nested unordered lists.

Please note that you will also need a standards compliant !doctype for this menu to work correctly.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.

2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.

3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.