TestCases - rollover effect with CSS

You are looking for a buttonlike rollover effect that works even with JavaScript disabled?

You've come to the right place. I'll explain how to convert a simple list into a buttonized menu-bar.
Here we go...

The (X)HTML-code needed for the list is quite simple:

<ul id="case" >
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
</ul>

You say But there ain't no buttons or images in that (X)HTML! - and guess what? - you are right. But that's all that is needed.

This solution separates structure quite well from style.

So here's the style-part incarnated as CSS:

ul#case li {
   background-image: url(cssRO.jpg);}
ul#case li a {
   display:block;
   background-image:url(cssR.jpg);
   border:2px groove #900;}
ul#case li a:hover {
   background-image:url(cssRO.jpg);}

The <a> is declared as blockelement to fill all the space the containing <li> provides. This way the hover works even above empty space, not only above text.
Even more interesting: The <li> has a background-image declared. How's that? That's for preloading the over-state image of the rollover-effect. This image gets repainted with the off-state-image (declared for <a>).

Put together it looks like this:

• Link1
• Link2
• Link3

What's left to be done? Quite obviously we need to restrain the list (menu) and add some more style to it...

First, we restrain the list making it 165px wide and style the a-element:

ul#case {
   list-style: none;
   width: 165px;}
ul#case li {margin: 5px;}
ul#case li a {
   width: 137px;
   padding: 2px 7px;}
ul#case li a:hover {padding: 2px 7px;}  

We remove the list-marks that get usually displayed before every <li> with 'list-style: none'.
We make every <a> 137px wide: 137px + 2 x 7px (padding) + 2 x 2px (border) = 155px. Adding the 2 x 5px for the margin of the <li> we get 165px.

And since we change the foreground-color we also specify the background-color:

ul#case li a {
   background-color: #aaa;
   color: white;}

Finally, let's put a border around the list, so it looks some kind of special:

ul#case {border: 1px dotted #900;}

In case the browser does not support images (but CSS) or is set to not display them, we want the text of the links still be legible. So an appropriate background-color should be chosen.

Finished!

The result will look like the following:

• Link1
• Link2
• Link3

The order of the properties and the rules is important (as always with CSS). Have a look at the CSS of this page for the settings that produced above behaviour...