<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>
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(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) 0 0 no-repeat;
}
#armut a {
width: 142px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -130px 0 no-repeat;
}
#muz a {
width: 120px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -272px 0 no-repeat;
}
#kivi a {
width: 108px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -392px 0 no-repeat;
}
#elma {
left: 0px;
}
#armut {
left: 130px;
}
#muz {
left: 272px;
}
#kivi {
left: 392px;
}
#elma a:hover {
width: 130px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) 0 -54px no-repeat;
}
#armut a:hover {
width: 142px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -130px -54px no-repeat;
}
#muz a:hover {
width: 120px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -272px -54px no-repeat;
}
#kivi a:hover {
width: 108px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -392px -54px no-repeat;
}
/*aktif sayfayı belirlemek için zemin resmi konumu belirleme*/
#elma a.secili {
width: 130px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) 0 -54px no-repeat;
}
#armut a.secili {
width: 142px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -130px -54px no-repeat;
}
#muz a.secili {
width: 120px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -272px -54px no-repeat;
}
#kivi a.secili {
width: 108px;
background: url(https://github.com/fatihhayri/fatihhayri.github.com/blob/master/images/menu.jpg?raw=true) -392px -54px no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.