How to make the HTML link activated by clicking on the <li>?
anchor, css, html, html-lists, menu
Solution
#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.
Problem
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; } ```