Information
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
Cascading Style Sheet
#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;
}
xhtml
<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>
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- The Hotfix forum for windows
- Complete travelguide to Phuket
- UK Game Server Hosting
- Free layouts and more - Myspace
- web hosting, dedicated servers
web reseller, managed servers - Host Color
Web Hosting for 30 Websites - pay as you go e-commerce
Build your own SEO friendly webshop - Web design in Dorset
Bournmouth based web design agency
