Change the color of a box in the horizontal menu

Navigation
2

I'm making a horizontal menu and I want each element of this menu to have a 20px box. Now I want you to move your mouse by cimam to change that color.

For this I thought that if I used a:hover I would solve the problem. Just not. It instead of changing the color of the box changes only the color back of each word.

Then I thought that giving padding to a:hover resolved. Only not.

Look at the example: note that the goal is for the color of the ahover to be filled in the entire 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;
}
    
asked by anonymous 23.10.2015 / 13:35

2 answers

2

You have not set the li: hover box size, when setting a size for it, the color will fill the entire space. Try this: 

li:hover {

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

}
    
23.10.2015 / 13:41
0

Add padding in li li, for example: 

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

li {
   margin: 10px; 
}

li a {
   padding: 12px;
}

li a:hover {
   background-color: red;
}
    
23.10.2015 / 14:08
Remove selection color from the JTable line? Grid System BootStrap