Make A List Item Clickable (HTML/CSS)

Question

So I\'m trying to make each list-item on my site clickable but I\'m not sure what is the best way to do it. Please help me out.

So here is the relevant HTML:

Answer 1

The key is to give the anchor links a display property of "block" and a width property of 100%.

Making list-items clickable (example):

HTML:

    
link1
    
link2
    
link3

CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 5px;
}
ul li a:hover {
  background-color: #ccc;
}