我有一个列表菜单(按钮),我想在每个列表项文本(link1,2,3,4)前面的按钮上添加一个小图像,左填充为 5 像素,当我悬停时它也应该保留我的鼠标悬停在一个按钮上。但我似乎无法找到一种方法来做到这一点。
可以用作示例的图像:http: //forum.pictomio.com/images/emoticons/smiley_3_ico.gif
这是我的按钮列表的代码:
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))
);
}