Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz. HTML Kodu

                
<div id="topmenu_set">
    <ul id="ul_topmenu">

        <li><a href="index.php">ANA SAYFA</a></li>
        <li><a href="prices.php">HAKKIMIZDA</a></li>
        <li><a href="portfolio.php">HİZMETLER</a></li>
        <li><a href="about.php">İLETİŞİM</a></li>
        <li><a href="order.php" class="replace" id="btn_order"><span></span>order</a></li>
    </ul>
</div>
         

CSS Kodu

                
<style>
#topmenu_set{
    width:540px;
    height:55px;
    background: url(http://www.design2slice.co.uk/images/back_topmenu.jpg) no-repeat;
}
#ul_topmenu{
    float:right;
    margin: 0px;
    padding: 0px;
    font-size: 11px;
    font-family: Tahoma;
}
#ul_topmenu li{
    float:left;
    list-style:none;
    text-transform:uppercase;
}
#ul_topmenu li a{

    font-size:1.2em;
    color:#f3f5f2;
    text-decoration:none; 
    text-align:center;
    width:100px;
    height:30px;
    display:block;
    padding-top:20px;
    font-weight:bolder;
}
#ul_topmenu li a:hover{
    color:#b1ceff;
    text-decoration:none;
}
#ul_topmenu li #btn_order{
    width:121px;
    height:55px;
    text-align:left;
    float:left;
    font-size:1.2em;
    position:relative;
    overflow:hidden;
    margin:0;
    padding:0;
    display:block;
}
#ul_topmenu li #btn_order span{
    background:url(http://www.design2slice.co.uk/images/btn_order.jpg) no-repeat;
    position:absolute;
    width:100%;
    height:100%;
    cursor:pointer;
}
#ul_topmenu li #btn_order:hover span{
    background:url(http://www.design2slice.co.uk/images/btn_order.jpg) no-repeat 0 100%;
}
</style>