Ö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>