Remote control CSS

Back to article

HTML code

<div id="nav">
<ul>
<li id="top"><a href="#">Pears</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
</ul>
</div>

CSS code

#nav
{
margin: 0;
padding: 0;
width: 131px;
background: url(images/background.gif) repeat-y;
}

#nav ul
{
background: url(images/base.gif) no-repeat bottom;
margin: 0;
padding: 0 0 39px 0;
list-style-type: none;
}

#nav li a
{
display: block;
padding: 0 0 .4em 25px;
margin: 0 0 0 12px;
list-style-type: none;
color: #fff;
text-decoration: none;
background: url(images/button.gif) no-repeat 0 0;
}

#nav li a:hover
{
color: #CC0;
background: url(images/button.gif) no-repeat 0 -200px;
}

#top
{
background: url(images/top.gif) no-repeat;
padding-top: 86px;
}