Make entire <li> clickable with <a> element inside without javascript [duplicate]

Question

Is there any way?

I have a <ul> with some <li> elements inside. It's part of a dropdown menu. Each <li> becomes a box the size of the largest <li> element in the group (the one with the most text inside it).

The problem is I want people to be able to click anywhere inside each <li> box and have the link work, instead of just where the text is. I would like a non javascript solution if possible.

Here's some sample HTML. The inner <li> elements are the ones with the links.

<li class="parent Glass" style=" float: left;">  Glass     <ul class="child" style="float: left; position: absolute; z-index: 999; display: none;">     <li style=" float: left;">                 <a href="http://example.com/path/to/somehwere.html?glass=25">Brown       (13)</a>      </li>     <li style=" float: left;">                 <a href="http://example.com/path/to/somehwere.html?glass=112">Crystal       (93)</a>      </li>     <li style=" float: left;">                 <a href="http://example.com/path/to/somehwere.html?glass=99">Gray       (1)</a>      </li>     <li style=" float: left;">                 <a href="http://example.com/path/to/somehwere.html?glass=42">Latte       (12)</a>      </li>     <li style=" float: left;">                 <a href="http://example.com/path/to/somehwere.html?glass=72">White       (15)</a>      </li>     </ul>  </li> 

Answer 1

You need to add display:block to your <a> tags, then you can set a width and height or padding [on the <a>], if you want to make the clickable region bigger.