Doing it with style
Now that we have CSS3 styling available in all modern browsers we can produce the previous menu using nothing more than a basic unordered list with just one class in the <ul>.
The above menu has several improvements on the previous version, namely that only the hexagon shapes are hovered and there is no overlap of the link area onto adjacent hexagon shapes and there are no images used.
Tested in IE9+, Firefox, Opera, Chrome and Safari.
IE9 does not support the radial gradient style so this browser will just show solid colors, but at least it supports the styling to produce the hexagons and the positioning.
<ul class="hex">
<li><a href="/menu/index.html">Demos</a></li>
<li><a href="/menus/index.html">Menus</a></li>
<li><a href="/layouts/index.html">Layouts</a></li>
<li><a href="/boxes/index.html">Boxes</a></li>
<li><a href="/mozilla/index.html">Mozilla</a></li>
<li><a href="/ie/index.html">Explorer</a></li>
<li><a href="/opacity/index.html">Opacity</a></li>
</ul>
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.