li {
      padding: 0px; // The trick is to make a tag acquire all the area of li so
                    // whenever you are hovering in li you are actually hovering
                    // in to the a tag.
   } 
li a {
      margin: 0px;
      display: block;
      width: 100%;
      height: 100%;
      padding: * ; // *add the padding which removed from li here.
      }