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
- VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo - SEO
First Rate - Australian SEO Company - CSS Menus
A CSSplay develoment - Web design in Dorset
Bournmouth based web design agency - web hosting, dedicated servers
web reseller, managed servers - Create Free Flash website
Create amazing websites with Wix.com
"The 
web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
CSS play pages
