How to make the HTML link activated by clicking on the ?

Question

I have the following markup,

              
    
Something1
    


        

Answer 1

Just to throw this option out there:

<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 I use in my menus, it makes the list item itself a hyperlink (similar to how one would make an image a link).
For styling, I usually apply something like this:

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

I can then apply whatever styling to the <li> that I wish.

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

Answer 2

jqyery this is another version with jquery a little less shorter. assuming that the <a> element is inside de <li> element

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

Answer 3

Just add wrap the link text in a 'p' tag or something similar and add margin and padding to that element, this way it wont affect the settings that MiffTheFox gave you, i.e.

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

Answer 4

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 5

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

You could also try placing the li tags within the a tags, however this is probably not valid HTML.

Answer 6

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 keep your formatting on your real link. It could be useful for <div> tag as well