Doing it with style
Updated 26th June 2006, 22nd September 2006 & 29th September 2006
Updated 5th July 2007 to add 1px black border around menu items
This was the first in the series but now there are more. Please feel free to browse all the others.
Updated 16th April 2010 to fix a problem in IE7 and IE7 emulation.
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, IE7, Firefox, Opera, Safari(PC), Google Chrome, Netscape 9 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.
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.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
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.