在垂直菜单中的li元素上的水印

Question

我希望有一个背景OVER li元素，但在ul上应用带有绝对药水的图像不会让我点击元素。 有没有比在每个li元素上切割图像更好的解决方案？

Answer 1

修改了李斯特先生的修改答案：http://jsfiddle.net/R222B/ 应用于列表中的第一个元素。请验证。

HTML：

<ul>
    <li><span> List1 </span><a href="#"><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></a></li>
    <li><span> List2 </span><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></li>
    <li><span> List3 </span><img src="http://www.aireuropa.com/waeam/en/estaticos/images/sky.png" /></li>
    <li><span> List4 </span><img src="http://www.ottopizza.co.uk/images/image.php?image=26.png&width=35" /></li>
</ul>

CSS：

    li
{
    display: block;
    width: 60px;
    height: 40px;
    margin: 0px;
    margin-top: 10px;
    padding; 0px;
    list-style-type: none;
}
span
{
    position: relative;
    z-index: 1;
}
img
{   
    float: left;
    width: 35px;
    height: 35px;
    position: absolute;
    margin-left: -33px;
    margin-top: -7px;
    z-index: 2;
}
a
{
    z-index: 3;
}