Information
Similar to menu nine, but this time the span information is displayed to give the impression of an 'impression'.
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 #444;
background:#dfd7ca;
}
#menu li {
float:left;
width:5em;
height:2em;
line-height:2em;
border-right:1px solid #444;
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; /* needed to trigger IE */
}
#menu li a:hover {
border:0;
}
#menu li a:hover span {
display:block;
width:5em;
height:2em;
text-align:center;
position:absolute;
left:1px;
top:1px;
color:#fff;
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
- UK Game Server Hosting
- Web design in Dorset
Bournmouth based web design agency - pay as you go e-commerce
Build your own SEO friendly webshop - Host Color
Web Hosting for 30 Websites - web hosting, dedicated servers
web reseller, managed servers - SEO Company
SEO company based in Manchester
"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
