How do I make the whole area of a list item in my navigation bar, clickable as a link?

Question

I\'ve got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is th

Answer 1

Put the list item within the hyperlink instead of the other way round.

For example with your code:

<a href="#"><li>One</li></a>

Answer 2

You should use this CSS property and value into your li:

pointer-events:all;

So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:

pointer-events:none;

Answer 3

Or you could use jQuery:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Answer 4

Just simply apply the below css :

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>