WwW.EminMsn.Tr.Gg
  c7
 
Ö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>

 
   
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol