How to make href link and <li> in one package

Question

Currently im using <li> to display href link, the problem is when i click on the so called 'box'it wont direct link to another page, i have to click on href link it will just link to another page. How can i make it like whenever i click on box / href link it will direct link to another page?

My current progress : Fiddle Demo

Any help will be appreciated.

Answer 1

You can't make an <li> act like an <a> , but you can match their sizes.

Updated Fiddle

#colOne ul li
{
  margin-bottom:10px;
  /*padding: 4px 10px;*/
  width:170px;
}
#colOne ul li a
{
    padding: 4px 10px;
    display: block;
}

By making the link a block element and moving the padding to it, instead of its wrapper, it will be exactly the same size as the <li>

Answer 2

You should be adding the padding to the anchor elements ( <a> ) instead of the list items <li> . This effectively increases the area of the link itself, instead of the area around the link.

First, get rid of the padding for the list item (the attributes I commented out):

#colOne ul li
{
  margin-bottom:10px;
  /*padding: 4px 10px;*/
  width:150px;
}

li {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #FFFFFF;
  /*position: relative; */
  /*display:block; */
  text-align: center;
  font-weight:bold;
  box-shadow: 1px 3px 3px #000;
  background: #7EB427;
  cursor: pointer;
  transition: all 0.2s;
}

Then, add it to the link:

.bg1 li a {
    display: block;
    padding: 4px 10px;   
}

Updated jsFiddle