CSS Image Rollover Örneği

<style type="text/css">

#navigation ul {
    width: 320px; 
    height: 30px; 
    position: absolute;
    top: 100px; 
    left: 300px; 
    background: url(menu.jpg) no-repeat 0 0;
    list-style: none;
    margin: 0; padding: 0;
}
#navigation li {
    display: inline;
}
#navigation li a:link, #navigation li a:visited {
    border: none;
    width: 80px; 
    height: 30px; 
    display: block; 
    position: absolute; 
    top: 0; 
    text-indent: -7000px;
    outline: none;
}
#navigation li.blue a:link, #navigation li.blue a:visited { 
    left: 0;
}
#navigation li.green a:link, #navigation li.green a:visited { 
    left: 80px 
}
#navigation li.orange a:link, #navigation li.orange a:visited { 
    left: 160px  
}
#navigation li.red a:link, #navigation li.red a:visited { 
    left: 240px  
}

#navigation li.blue a:hover {
    background: url(menu.jpg) no-repeat 0 -30px; 
}
#navigation li.green a:hover {
    background: url(menu.jpg) no-repeat -80px -30px; 
}
#navigation li.orange a:hover {
    background: url(menu.jpg) no-repeat -160px -30px;
}
#navigation li.red a:hover {
    background: url(menu.jpg) no-repeat -240px -30px;
}

</style>

<div id="navigation"> 
    <ul>
        <li class="blue"><a href="#">Blue</a></li>
        <li class="green"><a href="#">Green</a></li>
        <li class="orange"><a href="#">Orange</a></li>
        <li class="red"><a href="#">Red</a></li>
    </ul>
</div>