Retirar movimentação dos itens do menu quando passo o mouse

[Franciele Costa 0]

Olá,

 

Estou criando um menu para o meu blog...

Ele está assim no momento "http://frantrajai.blogspot.com.br/", porém gostaria de ao passar o mouse sobre algum item o restante não se movessem, ficassem fixos no lugar.

 

Este é o código:

#menu {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
background: #5cc6d0;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
 
#menu ul {
width: 1100px;
margin: auto;
text-align: center;
padding: 10px 0;
}
 
#menu li {
display: inline;
padding: 10px 20px;
}
 
#menu a {
color: #fff;
 
}
 
 
#menu li.green a:hover {
color: #000;
text-decoration:none;
padding: 8px 14px;
background: #fff;
 
 
 }

 

 

Como posso resolver isso?

 

Obrigada;

[jgustavo99 85]

Olá! Tente alterar assim o hover:

#menu li.green a:hover {
color: #000;
text-decoration:none;
background: #fff;
}

Espero ter Ajudado ;)

[Franciele Costa 0]

Oi,

 

Eu testei aqui e a movimentação acaba, só que ai diminui o tamanho do retângulo, como você pode ver:

http://frantrajai.blogspot.com.br/

 

Tem uma forma de aumentar eles sem usar o padding?

 

Muito obrigada!

[jgustavo99 85]

Olá! Como assim aumentar eles? Qual efeito você quer ao passar o mouse?

[Franciele Costa 0]

eu quero o efeito de aparecer o retângulo branco ..

como estava antes, porém sem que os outros itens do menu se mexam também ...

[William Bruno 1501]

Deixa o padding no a:link, assim:

 

#menu a {
    color: #fff;
    padding: 8px 14px;
}
 
#menu li.green a:hover {
    color: #000;
    text-decoration:none;
    background: #fff;
}

Se não, vai dançar conforme vc descreveu.

[Franciele Costa 0]

William Bruno,

 

Muito obrigado, resolveu meu problema!!!!

 

Vlw :)