Doing it with style
Another update to the previous menu to use a much simpler 'hack' to get the iPhone, iPad and iPod Touch to support :hover with the adjacent and general sibling selectors.
The iPad, iPhone and iPod Touch will show an 'undo' icon to the right/top of the menu when a sub level is open. Tapping this will close any open sub menu.
This menu has been tested in IE7, IE8, IE9, Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch and iPad.
The 'hack' for the iPhone, iPad and iPod Touch is to add two styles to the top level <div class="menu">:
.menu:active,
.menu:hover {}
The 'undo' icon is just an image. I have discovered that tapping an image will cancel any :hover or :active state and in this case cancels the :hover on the open sub menus.
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.