Nog simpeler kan het nauwelijks meer. Geef een div de class "simple-menu", en plaats daar een paar links in. Zonder gebruik van "ul's" en "li's" staat er een solide menu op het scherm (wat ultra-snel laadt en zijn werk doet...). Je kan de twee .png-graphics (aan.png en uit.png) natuurlijk vervangen door jouw eigen "plaatjes". Plaats de stylesheet in de head- en de html code in de body-sectie van jouw pagina. Het zal geen verrassing zijn dat dit hele kleine beetje code valideert op html5 en de CSS.
<div class="simple-menu">
<a href="/manuals/css/simple-menu.html"><b>een menu</b></a>
<a href="/manuals/css/simple-menu.html"><b>wat heel</b></a>
<a href="/manuals/css/simple-menu.html"><b>makkelijk</b></a>
<a href="/manuals/css/simple-menu.html"><b>en valide</b></a>
<a href="/manuals/css/simple-menu.html"><b>is gemaakt</b></a>
</div>
<style type="text/css">
.simple-menu{
width:200px;
font-size:smaller}
.simple-menu a, #simple-menu a:visited{
display:block;
width:100%;
height:26px;
line-height:26px;
text-decoration:none;
color:#000;
background:url('uit.png') no-repeat left center}
.simple-menu a b{
padding-left:20px}
.simple-menu a:hover{
color:#E43200;
background:url('aan.png') no-repeat left center}
</style>