Code:
<style type="text/css">
#navigation {
list-style: none;
margin: 0px 0px 0px 278px;
padding: 0;
text-align:left;
z-index:1;
}
#navigation li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#navigation a {
display: block;
width: 140px;
height: 15px;
background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat;
padding: 10px 0.5em;
color: #FFFFFF;
text-decoration: none;
font-size:12px;
text-align: center;
}
#navigation a:hover {
background: url("http://aracelid.110mb.com/boton_ROLLOVER_08.png") no-repeat;
}
#one, #two,#three {background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat 0px 0px;}
#one_div{width:140px;height:36px;}
#two_div{width:140px;height:36px;}
#three_div{width:140px;height:36px;}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="#" id="one" style="color:#FFFFFF;text-decoration:none;" ><div id="one_div">One</div></a></li>
<li><a href="#" id="two" style="color:#FFFFFF;text-decoration:none;"><div id="two_div" >Two</div></a></li>
<li><a href="#" id="three" style="color:#FFFFFF;text-decoration:none;"><div id="three_div" >Three</div></a></li>
</ul>