How to make a click of the list image trigger a click of the link inside that list element?

Question

I have an unordered list containing links.

I styled the list so that there is a "Click Me" image to the left of the link.

ul 
{ 
    list-style-image:url(/images/ClickMe.png)
}

The problem is: when the user clicks on "Click Me", they are not redirected and nothing happens.

How do I make a click of the list image trigger a click of the link in that list element?

<ul>
    <li><a href="someurl">Some Url</a></li>
    <li><a href="someotherurl">Some Other Url</a></li>
</ul>

Answer 1

This is more of a CSS problem I think, because the list bullets are not actually part of the a tag. You can cheat by making the links "wide left" to include the bullets like this (see the jsfiddle snippet):

ul
{ 
    list-style: disc;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

a {
    margin-left: -20px;
    padding-left: 20px;
}

Answer 2

You can always make the item clickable through jQuery:

$("li").click( function (evt) {
    location.href = $(this).find("a").attr("href");
});

Answer 3

I don't know if there's a better way to do it but this works by making the link size so that it includes the bullets to the left of the link.

a{
  margin-left: -2em;
  padding-left: 2em;
}