Change the color of a box in the horizontal menu

Asked

Viewed 562 times

2

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;
}
css xhtml

  • Example: http://jsfiddle.net/r8cum7q4/2/

2 answers

2

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;

}

  • For example only: http://jsfiddle.net/r8cum7q4/

  • Thank you. The problem is that I have 2 horizontal menus on the same page and I am not able to make them to have different colors.

  • Knows how to use ID’s or Classes ?

  • Like Deesouza said, just use classes.

  • I know. I just don’t know how to apply it to horizontal menus. The book I read on the subject was old enough not to talk about horizontal menus. And he only spoke basic lists. I don’t know if you know the book "use your head with xhtml css". I’ve been looking at other more current books but I can’t find anything specific on this subject.

  • 1

    Take this example: http://jsfiddle.net/r8cum7q4/2/

  • 1

    Or that https://jsfiddle.net/r8cum7q4/3/ that of Deesouza is better...

  • I have tested outside the site and in principle I got :) Thanks EVEN for the help. Already now know articles/ sites or books that address more on this topic? Thank you.

  • 1

    That’s how it starts, good studies for you!

Show 4 more comments

0

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;
}

Browser other questions tagged css xhtml

You are not signed in. Login or sign up in order to post.