Make Whole As Link With Proper HTML

I know this has been up a lot of times before, but I couldn't find any solution in my specific case. I've got a navigation bar and I want the whole

's to be 'linked' or '

Solution 1:

• Get rid of the <div>s.
• Set the <a> tags to have display: block
• Move the padding from the <li> to the <a>.
• The <li>s will need to be either floated or display: inline-block

Example: http://jsfiddle.net/8yQ57/

Solution 2:

Just use "display block" for link.

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

Here's the example http://jsfiddle.net/TWFwA/ :)

Solution 3:

I myself just had this problem.

The answer couldn't be simpler:

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

in other words, you want to apply the css that the LI's had to the A element. Making sure that the A is a block line element

Solution 4:

I think you may have meant inline-block, not inner-block:

li a {display: inline-block; height: 100%; width: 100%; }

Also, inline-block has its own set of problem with older IE browsers, and probably won't react how you'd expect.

Solution 5:

a sir you use jquery ? if yes, you can try it :

$("li").click(function(){
   $(this).find('a').click();
});

or you could use it too as css:

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

Choose one ... Good luck