3

Tenho um menu horizontal com os links (exemplo): Home; Sobre; Contatos;

A ideia é que o home fique sempre com o padding background verde e o resto dos links com background branco. Quando se passa o rato (mouse) por cima dos demais links o respectivo background mude de cor passando a ser verde (li:hover).

3
  • 2
    Vamos lá, David. Edite sua pergunta e explique detalhadamente o que você precisa, o que você já tem pronto e, se possível, use o JSFiddle (agora você sabe como funciona). Commented 17/08/2014 às 0:12
  • @BrunoAugusto penso que tinha tudo isso. O problema foi de quem editou. Deve ter apagado. Já não me recordo.
    – David
    Commented 21/08/2014 às 15:07
  • David mesmo sem a edição não se percebe qual é o problema.
    – Jorge B.
    Commented 3/03/2015 às 8:54

1 Resposta 1

6

Isso é bem básico, sugiro que você estude um pouco mais sobre classes, e suas propriedades, um bom lugar para aprender muita coisa é no site W3Schools.

De qualquer forma, segue um pequeno exemplo:

CSS:

ul {
    list-style:none;
}
li {
    width: 100px;
    height:36px;
    line-height:36px;
    text-align: center;
    display:inline-block;
}
li:hover, .active {
    background-color:#00ff00!important;
}

HTML:

<ul>
    <li class="active">Home</li>
    <li>Produtos</li>
    <li>Download</li>
    <li>Contatos</li>
</ul>

JSFiddle

2
  • brasofilo está quase. A ideia é que home nunca fique sem o verde. Sabe como fazer? Obrigado pela referência.
    – David
    Commented 17/08/2014 às 21:44
  • 1
    @David editei a resposta e o jsfiddle e corrigi para o ativo ficar fixo, particularmente eu acho meio estranho assim... Commented 17/08/2014 às 22:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .