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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"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