07-18-2013, 06:22 PM
Kod:
<style type="text/css">
#onmenu {
width: 250px;
}
#onmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#onmenu ul li a {
text-decoration: none;
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
display: block;
height: 23px;
width: 245px;
padding-top:2px;
padding-left: 5px;
background-image: url(http://img.webme.com/pic/o/oyunlarbilecik2/onmenu1.png);
margin-bottom: 1px;
}
#onmenu ul li a:hover {
background-image: url(http://img.webme.com/pic/o/oyunlarbilecik2/onmenu1hv.png);
}
</style>
<div id="onmenu">
<ul>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
<li><a href="#">Eklenecek</a></li>
</ul>
</div>
Kod:
<style type="text/css">
#linkhover ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align:left;
}
#linkhover ul li a {
display: block;
height: 23px;
width: 250px;
color: #fff;
font-family: Calibri, Arial;
text-decoration: none;
padding-top:2px;
padding-left: 5px;
background-image: url(http://img.webme.com/pic/g/grafikdizayn/cgp_1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#linkhover ul li a:hover {
padding-left: 7px;
color: #fff;
background-image: url(http://img.webme.com/pic/g/grafikdizayn/cgp_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
</style>
<div id="linkhover">
<ul>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
<li><a href="#">Sayfanın Adı</a></li>
</ul>
</div>
</ul>
</div>