Tutorial 2 - Simple CSS rollover lists

Variation - Adding borders

There are endless possibilities that can be achieved with padding and borders. One simple option is to set different border colors to each side of the list, and then reverse the colors for the active state. This gives the classic "raised and pressed" button look.

See all steps combined →

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a
{
display: block;
color: #036;
background-color: transparent;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;

}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;

}


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
Other Max Design articles and presentations
Associated with webstandardsgroup.org