Change the color of a box in the horizontal menu

Question

I’m making a horizontal menu and I want each element of this menu to have a 20px box. Now I want that when passing with the mouse by top that box change color.

That’s why I thought the a:hover solves the problem. Just not. Instead of changing the color of the box, it changes only the color back of each word.

Then I thought that by giving a padding at the a:hover solved it. Only.

Take the example: note that the goal is the color of the ahover to be filled the whole box of the elements.

HTML

<ul>
 <li><a href="inicio.html">Inicio</a></li>
 <li><a href="ajuda.html">Ajuda</a></li>
 <li><a href="contatos.html">Contatos</a></li>
</ul>

CSS

ul {
   display: inline;
   margin: 0px;
   padding: 0px;
}

li {
   margin: 10px;
   padding: 12px;
}

a:hover {
   background-color: red;
}

Answer 1

You did not set the box size of the li:Hover, when setting a size for it, the color will fill the whole space. So forehead:

li:hover {

margin: 10px; padding: 12px;
background-color: red;

}

Answer 2

Add padding in li a, example:

ul {
   display: inline;
   margin: 0px;
   padding: 0px;
}

li {
   margin: 10px; 
}

li a {
   padding: 12px;
}

li a:hover {
   background-color: red;
}