Mobile Friendly Website


Doing it with style

CSS MENUSExperimental Menu #1 - Magic Menu series

Date : 10th August 2007

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.


This is an entirely new experimental menu system that does not use conditional comments, does not use CSS hacks or behaviors, does not use javascript, DOES validate as xhtml1.0 Strict and the CSS also validates.

So wheres the catch? well it works in IE5.5, IE6, IE7, Netscape (latest), Opera and Safari(PC), but Firefox and Mozilla fail to interpret this in the same way as all the other browsers, the menu drops down and the flyout functions correctly but the sub links are not clickable. Clicking on a sub link will be treated as if you clicked on the top level link :(

However, with a very small amount of javascript , Firefox and Mozilla too will work :)

So this first demonstration is just to show that the method works with many of the latest browsers and a few of the older IE ones and uses no javascript, but the next demonstration in this series makes use a couple of lines of javascript to re-arrange the html into a form that Firefox will interpret correctly and what is more the re-arranged html would also validate and it uses the same CSS. I am, however, still investigating a non javascript answer for Firefox and Mozilla.

To see the second menu in this series just click the 'NEXT' button in the sub-menu at the top of the page.

6th February 2012

Firefox now gets this right

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

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.


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