How to make the HTML link activated by clicking on the <li>?

Question

I have the following markup,

<ul id="menu">                   <li><a href="#">Something1</a></li>     <li><a href="#">Something2</a></li>     <li><a href="#">Something3</a></li>     <li><a href="#">Something4</a></li> </ul> 

The <li> is a bit big, with a small image on its left, I have to actually click on the <a> to activate the link. How can I make a click on the <li> activate the link?

Edit1:

ul#menu li {     display:block;     list-style: none;     background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;     border: 1px solid #b2b2b2;     padding: 0;     margin-top: 5px; }  ul#menu li a {      font-weight: bold;     text-decoration: none;     line-height: 2.8em;     padding-right:.5em;     color: #696969; } 

Answer 1

#menu li { padding: 0px; } #menu li a { margin: 0px; display: block; width: 100%; height: 100%; } 

It may need some tweaking for IE6, but that's about how you do it.

Answer 2

As Marineio said, you could use the onclick attribute of the <li> to change location.href, through javascript:

<li onclick="location.href='http://example';"> ... </li> 

Alternatively, you could remove any margins or padding in the <li>, and add a large padding to the left side of the <a> to avoid text going over the bullet.