WwW.EminMsn.Tr.Gg
  c2
 
Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz. HTML Kodu
                

<ul class="menu"> <!-- Menu Begin  -->

<li>  
   
<a href="http://www.cssornekleri.com/menu/liste"> <img src="user.png" alt="user.png">
   
<span class="name">Ana Sayfa</span>
   
<span class="description">açıklama alanı gelecek</span>
   
</a>
</li>

<li>
   
<a href="http://www.cssornekleri.com/menu/liste"> <img src="comment.png" alt="comment.png">
   
<span class="name">Hakkımızda</span>
   
<span class="description">açıklama alanı gelecek</span>
   
</a>
</li>

<li>
   
<a href="http://www.cssornekleri.com/menu/liste"> <img src="print.png" alt="print.png">
   
<span class="name">Referanslar</span>
   
<span class="description">açıklama alanı gelecek</span>
   
</a>
</li>

<li>
   
<a href="http://www.cssornekleri.com/menu/liste"> <img src="edit.png" alt="edit.png">
   
<span class="name">Hizmetlerimiz</span>
   
<span class="description">açıklama alanı gelecek</span>
   
</a>
</li>


</ul> <!-- Menu End -->

       
CSS Kodu
                

<style type="text/css">
.menu , .menu ul {
    width
:202px;
    margin
:auto;
    padding
:5px;
    list
-style-type: none;
    overflow
:hidden;
    border
:1px solid #eee;
}
.menu li {
   
float:left;
    position
:relative;
}
.menu li img {
   
float:left;
    margin
: 5px 0 0 5px;
    border
:none;
}
.menu li a .name {
   
float:left;
    width
:166px;
    margin
:0 0 0 5px;
    font
-weight:bold;
    font
-size:0.7em;
    cursor
:pointer;
}
.menu li a:active, .menu li a:focus {
    outline
:0;
}
.menu li a .description{
   
float:left;
    width
:161px;
    margin
:-5px 0 0 5px;
    font
-weight:normal;
    font
-size:0.7em;
    cursor
:pointer;
}
.menu li a:link, .menu li a:visited {
    height
:35px;
    font
-size:1em;
    color
:#000;
    text
-decoration:none;
    line
-height:20px;
    border
:1px solid #fff;
    display
:block;
    font
-weight:bold;
}
.menu li a:hover  {
    background
:#eee;
}
</style>

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