CSS

play

Experiments with Cascading Style Sheets

• NEW! FORUM
• HELP & ASSISTANCE
• FAQs
• CONTACT ME
• PRIVACY POLICY
• SITE MAP
• ACCESSKEYS
• SUPPORT
• 

• Demos
• Menus
• Layouts
• Boxes
• Mozilla
• Explorer
• Opacity
• Javascript

• HOME
• LIST
• PREVIOUS
• NEXT
• LAST
• COMMENTS
• TUTORIAL

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.