body
{
background-color: #f0f0f0;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

h2
{
color: #fff;
text-align: center;
background: #592DC5;
}

#wrapper
{
margin: 0 auto;
width: 800px;
}

#header
{
background: #592DC5
}

#content
{
background: #d0cbde;
margin-left: 35px;
width: 743px;
padding: 10px;
border: 1px solid #3B3B3B;
}

#navi
{
float: left;
width: 35px;
margin-top: 100px;
}

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navi li
{
margin-top: 5px;
}

#navi a
{
display: block;
width: 35px;
height: 80px;
}

.home
{
background: url(../img/0024/button1.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}

.about
{
background: url(../img/0024/button2.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}

.contact
{
background: url(../img/0024/button3.gif);
background-position: 12px 0;
background-repeat: no-repeat;
}

a.home:hover, a.about:hover, a.contact:hover
{
background-position: 0 0;
}

<div id="wrapper">

<h2>Register-Navi mit Hover-Effekt</h2>

<div id="navi">

<ul>
<li><a class="home" href="#"></a></li>
<li><a class="about" href="#"></a></li>
<li><a class="contact" href="#"></a></li>
</ul>

</div><!--Ende navi-->


<div id="content">

Content-Inhalt

<br style="clear: both;">
</div><!--Ende content-->
</div><!--Ende wrapper-->