<style>
ul#menu {
height: 54px;
width: 500px;
margin: 0;
padding: 0;
}
ul#menu li {
list-style: none;
position: absolute;
}
ul#menu li a {
height: 54px;
display: block;
position:relative;
}
ul#menu li a {
text-indent: -9999px;
text-decoration: none;
}
#elma a{
width:130px;
background: url(images/menu.jpg) 0 0 no-repeat;
}
#armut a{
width:142px;
background: url(images/menu.jpg) -130px 0 no-repeat;
}
#muz a{
width:120px;
background: url(images/menu.jpg) -272px 0 no-repeat;
}
#kivi a{
width:108px;
background: url(images/menu.jpg) -392px 0 no-repeat;
}
#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}
#elma a:hover{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a:hover{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a:hover{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a:hover{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}
/*aktif sayfayı belirlemek için zemin resmi konumu belirleme*/
#elma a.secili{
width:130px;
background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a.secili{
width:142px;
background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a.secili{
width:120px;
background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a.secili{
width:108px;
background: url(images/menu.jpg) -392px -54px no-repeat;
}
</style>
</head>
<body>
<ul id="menu">
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz" class="secili">Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>
</body>
