<div id="menu">
<a href="index.html" title="Ссылка">Ссылка 1</a>
<a href="url1" title="Ссылка">Ссылка 2</a>
<a href="url2" title="Ссылка">Ссылка 3</a>
<a href="url3" title="Ссылка">Ссылка 4</a>
<a href="url4" title="Ссылка">Ссылка 5</a>
<a href="url5" title="Ссылка">Ссылка 6</a>
<a href="url6" title="Ссылка">Ссылка 7</a>
</div>
------------------------------
CSS
------------------------------
#menu a {
display:block;
width:164px;
margin: 0; padding:4px 0 10px 16px;
font: bold 14px/1 sans-serif;
color:#154882;
background: url("images/button.png") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -180px 0;
color: #fff;
}
<div id="menu">
<p><a id="link1" href="url1" title="Ссылка"><span> </span>Ссылка 1</a></p>
<p><a id="link2" href="url2" title="Ссылка"><span> </span>Ссылка 3</a></p>
<p><a id="link3" href="url3" title="Ссылка"><span> </span>Ссылка 4</a></p>
<p><a id="link4" href="url4" title="Ссылка"><span> </span>Ссылка 5</a></p>
<p><a id="link5" href="url4" title="Ссылка"><span> </span>Ссылка 5</a></p>
</div>
div#menu a span{position: absolute;
width: 181px;height:32px;
background-image: url(images/but.png)}
a#link1 span{background-position: 0 -2px}
a:hover#link1 span{background-position: 0 -166px}
a:visited#link1 span{background-position: 0 -2px}
a#link2 span{background-position: 0 -33px}
a:hover#link2 span{background-position: 0 -166px}
a:visited#link2 span{background-position: 0 -33px}
a#link3 span{background-position: 0 -67px}
a:hover#link3 span{background-position: 0 -166px}
a:visited#link3 span{background-position: 0 -67px}
a#link4 span{background-position: 0 -100px}
a:hover#link4 span{background-position: 0 -166px}
a:visited#link4 span{background-position: 0 -100px}
a#link5 span{background-position: 0 -133px}
a:hover#link5 span{background-position: 0 -166px}
a:visited#link5 span{background-position: 0 -133px}
a {text-decoration: none;cursor:pointer;}