Two Different Horizontal Menus

Navigation
3

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

I can not get one of these menus to have a one-color box in there

What I did was to give a padding to each of the menu items so that when you move the mouse it would be that color.

I gave a yellow color to show the default state and a yellow one, lighter, when the mouse is passed.

In short: The problem is that by moving the mouse the light yellow color does not occupy all the yellow that is in premanence - link

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>
    
asked by anonymous 27.07.2014 / 16:14

2 answers

1

I found out where the problem is.

I do not know how to do this, but I do not know how to do it.

So it should look like this: 

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

Instead of: 

#navt a:hover{
    background-color: #faf6eb;
}
    
15.08.2014 / 18:55
1

The problem was best clarified only in the comments so, although this response is not in the horizontal menu format, it still solves the problem as explained in the author's own answer.

Throughout the comments there is a link for the same solution, however considering the inline format >.

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 in JSFiddle

See what was done and compare it with your current code.

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

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

    
27.07.2014 / 17:22
RSA, SSLStream - Key Exchange Browse third-party pages