<li> com link e hover diferente

[marcelocardoso 6]

pessoal.

to com o seguinte código, preciso q adicionar em uma <li> para destacar e deixar ela diferente das outras, tipo: ACTIVE, ATIVADA:

        #menu ul {
            color: white;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        
        #menu ul li {
            display: inline;
        }
        
        #menu ul li a {
            padding-top: 25px;
            padding-bottom: 25px;
            vertical-align: middle;
            text-align: center;
            display: block;
            transition: background-color 1s, color 1s;
            transition-timing-function: ease-out;
            width: 20%;
            text-decoration: none;
            float: left;
        }
        
        #menu ul li a:hover {
            color: orange;
            background-color: white;
        }

Quero em um <li class="menuATIVO>teste</li>
ou seja, criar um classe onde possa em MENUATIVO, colocar estilo diferente, ok.

Tentei de várias formas, neste contexto, não consegui...
Se quiserem contribuir, agradeço.

Obrigado.

[L. Henrique 179]

Marcelo,

Pra fazer com que um item receba uma classe active enquanto ele estiver em X posição na página, você vai precisar de jQuery com scrollTop. O que você vai definir é: Quando a página chegar em X div (scrollTop), o menu :nth-child(3), por exemplo, vai receber a classe X.

Entende quando explico dessa forma ou ainda não manja muito de JS? Se não manjar, tentaremos trabalhar isso juntos.

Abraços!

[Electronic 124]

Quer ela diferente ao carregar a pagina ou ao rolar a pagina?

de qualquer forma

Defina no CSS uma classe que vai ter as regras que vao diferenciar a li das outras

Com JS adicione essa classe a li

se for com rolagem faz como L. Henrique disse

se for ao carregar no serverside adicione a classe