Doing it with style
A simple definition list menu styled using a 'no content' span to give the appearance of an indication light above each menu item.
The text and spans are in ems so the menu will stay in shape when resized.
Hacks added so that it works in IE5.01 and IE5.5
This menu replaced one of my early attempts that wasn't to my liking. I think that this is an improvement.
dl#artist dt {
display:none;
}
dl#artist dd {
padding:0;
margin:0;
}
a.xmenu, a.xmenu:visited {
display:block;
width:5em;
height:3em;
background:#000;
text-decoration:none;
text-align:center;
color:#aaa;
float:left;
}
a.xmenu span, a.xmenu:visited span {
display:block;
width:3em;
height:0.5em;
border-top:0.5em solid #000;
border-left:1em solid #000;
border-right:1em solid #000;
border-bottom:0.5em solid #000;
background:#050;
overflow:hidden;
}
* html a.xmenu span, * html a.xmenu:visited span {
width:5em;
height:1.5em;
w\idth:3em;
he\ight:0.5em;
overflow:hidden;
}
a.xmenu:hover {
color:#ff0;
}
a.xmenu:hover span {
background:#0f0;
}
<dl id="artist">
<dt>Artists menu</dt>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Matisse
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Cezanne</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Turner
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Monet
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Lowry
</a>
</dd>
</dl>
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.