I'm looking to enhance my list menu buttons by adding a small image in front of each item text (link1,2,3,4) with 5 pixels padding on the left. I want the image to remain visible even when hovering over the button, but I'm struggling to figure out how to achieve this.
Here's an example image you can use:
This is the code for my button list:
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))
);
}