Two Different Horizontal Menus

Question

I’m creating two horizontal menus on the same page with different settings and so I used a class in each of them.

I’m not getting one of these menus to get the one-color box on have

What I did was give one padding to each of the menu items so that when the mouse is passed it will be that color.

I gave a yellow color to show the default state and another yellow, lighter, when passing the mouse.

In short: The problem is that when passing the mouse the light yellow color does not occupy all the yellow that is in premanence - http://jsfiddle.net/Lyu65/

My current code:

ul.nav{
    font-family: globerthin, Verdana, Arial, Geneva, sans-serif;
    list-style-type: none;
    margin-top: 50px;
    }
ul li.nav{
    display: inline;
    background-color: yellow;
    color: black;
    margin-left: 20px;
    padding-left: 25px;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    font-size: 125%;
    font-weight: bold;
    }
.nav a:link{
    color: black;
    text-decoration: none;
     }
.nav a:visited {
    color: black;
    text-decoration: underline;
}
.nav a:hover{
    background-color: #faf6eb;
    text-decoration: none; 
    }
.nav a:active{
    color: black;
    text-decoration: underline; 
    }

<ul class="nav">        
<li class="nav"><a href="index.html#equipamentos" title="Navegar para Eqipamentos">EQUIPAMENTOS</a></li>
<li class="nav"><a href="index.html#actividades" title="Navegar para actividades">ACTIVIDADES</a></li>
<li class="nav"><a href="index.html#duvidas" title="Navegar para dúvidas técnicas">D&Uacute;VIDAS T&Eacute;CNICAS</a></li>
<li class="nav"><a href="index.html#reparar" title="Navegar para ás reparações de equipamentos">REPARA&Ccedil;&Atilde;O DE EQUIPAMENTO</a></li>
<li class="nav"><a href="index.html#usados" title"Navegar para usados">USADOS</a></li>
<li class="nav"><a href="index.html#blogue" title="Navegar para ao blogue">BLOGUE</a></li>

Answer 1

The problem was best clarified only in the comments then, although this answer is not in the format of a horizontal menu, it still solves the problem as stated in response of the author himself.

Throughout the comments exists a link for the same solution but considering the format inline.

---

At the request of the author a very simple demonstration:

HTML

<ul id="menu1">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>

<ul id="menu2">
    <li><a>Item #1</a></li>
    <li><a>Item #2</a></li>
    <li><a>Item #3</a></li>
</ul>

CSS

#menu1, #menu2 {
    border: 1px solid #000;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
}

#menu1 li, #menu2 li {
    padding: 5px;
}

#menu1 li {
    background-color: #FFFF00;
}

#menu1 li:hover {
    background-color: #FFFF4D;
}

#menu2 li {
    background-color: #FF0000;
}

#menu2 li:hover {
    background-color: #FF4D4D;
}

Demo at Jsfiddle

See what has been done and compare with your current code.

We have two menus, but each with a different ID, so whatever is applied to one of them, if the rule is not being applied to both, will not be applied to the other.

When the mouse passes through the items of each selector li:hover is fired and the background color shift.

Answer 2

I found out where the problem is.

In the hover i put a:houver after the color, actually I want to apply the color not to the a but yes to the li.

So it should stay that way:

#navt li:hover{
    background-color: #faf6eb;
}

Instead of:

#navt a:hover{
    background-color: #faf6eb;
}