html/css爲我的菜單中的每個listitem的每個添加一個圖像

Question

我有一個listmenu（按鈕），我想添加一個小圖像到每個listitem文本前面的按鈕 （link1,2,3,4 ）有5個像素的填充左側， 當我將鼠標懸停在按鈕上時，它也應該保留。 但我似乎無法找到如何做到這一點。

圖像，你可以作爲一個例子使用： http://forum.pictomio.com/images/emoticons/smiley_3_ico.gif

這是我buttonlist代碼：

HTML：

<div id="menupadding"> 
<div id="menu"> 
<ul> 
<li><a href="#">link1</a></li> 
<li><a href="#">link2</a></li> 
<li><a href="#">link3</a></li> 
<li><a href="#">link4</a></li> 
</ul> 
</div> 
</div> 

CSS：

#menupadding { 
    padding-top: 100px; 
    padding-left: 302px; 
} 

#menu { 
    margin:0; 
    padding:0; 
} 

#menu li{ 
    display:block; 
    list-style:none; 
    padding-bottom:1px; 
} 

#menu ul{ 
    width: 140px; 
    margin:0; 
    padding:1px;  
} 

#menu li a{ 
    display:block; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:12px; 

    color:#ffffff; 

    text-decoration:none; 

    background-color: #376596; 

    padding-top:2px; 
    padding-left: 20px; 
    padding-bottom: 2px;  
} 

#menu li a:hover{ 
    font-size:12px; 
    color:#ffffff; 
    padding-left: 40px; 

    background-image: linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%); 
    background-image: -o-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%); 
    background-image: -moz-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%); 
    background-image: -webkit-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%); 
    background-image: -ms-linear-gradient(bottom, rgb(0,65,139) 14%, rgb(33,42,66) 89%, rgb(0,0,0) 100%); 

    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     left top, 
     color-stop(0.14, rgb(0,65,139)), 
     color-stop(0.89, rgb(33,42,66)), 
     color-stop(1, rgb(0,0,0)) 
); 
} 

Answer 1

請更新下面的CSS這一個

#menu li a{ 
    display:block; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:12px; 

    color:#ffffff; 

    text-decoration:none; 

    background-color: #376596; 

    padding-top:2px; 
    padding-left: 20px; 
    padding-bottom: 2px; 


    background-image:url('http://images.subeta.net/smilies/6398_emoticon_smile.gif'); 
     background-repeat:no-repeat; 

} 

您可以查看即時click here