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