Doing it with style
Using a span to hold the shadow information and display it on hover.
19th September 2006
Updated to place menu items in a list and restyled to work in Opera 9.01
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:5em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0; /* needed to trigger IE */
color:#bbb;
}
#menu li a:hover span {
display:block;
width:5em;
height:2em;
text-align:center;
position:absolute;
left:-2px;
top:-3px;
color:#000;
cursor:pointer;
}
<ul id="menu">
<li><a href="#nogo">ITEM 1<span>ITEM 1</span></a></li>
<li><a href="#nogo">ITEM 2<span>ITEM 2</span></a></li>
<li><a href="#nogo">ITEM 3<span>ITEM 3</span></a></li>
<li><a href="#nogo">ITEM 4<span>ITEM 4</span></a></li>
<li><a href="#nogo">ITEM 5<span>ITEM 5</span></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.