How to make an HTML link activated by clicking on <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> 

<li> little big, with a small image on the left, I have to actually click on <a> to activate the link. How to click on <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%; } 

IE6 may require some tweaking, but that’s how you do it.

Answer 2

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

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

Alternatively, you can remove any margins or indents in the <li> and add a large padding to the left of the <a> to avoid text moving around the mark.

Answer 3

Just select this option:

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

This is the style that I use in my menus; it itself makes the list item a hyperlink (similar to how you can make an image a link).
For styling, I usually use something like this:

 nav ul a { color: inherit; text-decoration: none; } 

Then I can apply any style to the <li> that I desire.

Note: Validators will complain about this method, but if you are like me and do not base your life around them, this should work fine.

Answer 4

This will make the entire <li> object a link:

 <li onclick="location.href='page.html';" style="cursor:pointer;">...</li> 

Answer 5

Just add a wrapper for the link text in the 'p' tag or something similar and add this element to it and add it, this way it will not affect the settings that MiffTheFox gave you, i.e.

 <li> <a href="#"> <p>Link Text </p> </a> </li> 

Answer 6

jqyery is another version with jquery a little less short. that the <a> element is inside the <li> element

 $(li).click(function(){ $(this).children().click(); }); 

Answer 7

Or you can create an empty link at the end of your <li> :

 <a href="link"></a> .menu li{position:relative;padding:0;} .link{ bottom: 0; left: 0; position: absolute; right: 0; top: 0; } 

This will create a full clickable <li> and save your formatting on your real link. This may be useful for the <div> tag as well

Answer 8

You can try the "onclick" event inside the LI tag and change the "location.href" as in javascript.

You can also try placing li tags in tags, however this is probably not valid HTML.

Answer 9

The following seems to work:

 ul#menu li a { color:#696969; display:block; font-weight:bold; line-height:2.8; text-decoration:none; width:100%; } 

Answer 10

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

By making your link as big as your li: just move the statement

 display: block; 

from li to a and you are done.

I.e:

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

Side note: you can remove "ul" from your two selectors: #menu is sufficient, unless you need to add weight to these two rules to override other instructions.

Answer 11

Use jQuery, so you don't need to write inline javascript in the <li> element:

 $(document).ready(function(){ $("li > a").each(function(index, value) { var link = $(this).attr("href"); $(this).parent().bind("click", function() { location.href = link; }); }); });