Resimdeki gibi bir sonuç oluşuyor.
Yardımcı olabilecek arkadaşlar var mı ?
Dileyen arkadaşlar, JSFiddle üzerinden de bakabilir diye:
JS Fiddle CSS Kodları
Yalın olarak da şöyle vereyim:
CSS Kodları:
#navigasyon-menu ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#navigasyon-menu ul li {display: inline;background:none;margin:0;padding:0;}
#navigasyon-menu ul li a {display: block;float: left;width: 64px;height:64px;background-image: url('http://2.bp.blogspot.com/-zBcV7Bb0z7Q/UEXKUScDL3I/AAAAAAAAB-g/zS-d5wbxNaM/s1600/Navigasyon-Menu-Resim.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#navigasyon-menu ul li a.anasayfa {background-position: -0px -0px; }
#navigasyon-menu ul li a.anasayfa:hover {background-position: -0px -65px; }
#navigasyon-menu ul li a.hakkimda {background-position: -62px -0px; }
#navigasyon-menu ul li a.hakkimda:hover {background-position: -62px -62px; }
#navigasyon-menu ul li a.iletisim {background-position: -125px -0px; }
#navigasyon-menu ul li a.iletisim:hover {background-position: -125px -65px; }
#navigasyon-menu ul li a.reklam {background-position: -190px -0px; }
#navigasyon-menu ul li a.reklam:hover {background-position: -190px -65px; }
#navigasyon-menu ul li a.destek-ver {background-position: -253px -0px; }
#navigasyon-menu ul li a.destek-ver:hover {background-position: -253px -65px; }
#navigasyon-menu ul li a.arsiv {background-position: -317px -0px; }
#navigasyon-menu ul li a.arsiv:hover {background-position: -317px -65px; }
