Efeito hover nos links de navegação

Qual é sua questão:
Bom, vi um efeito bem interessante em um fórum, que ao passar o cursor em um link do menu de navegação, aparece um retângulo no fundo do link.
O fórum que ví é este: http://innovation.forumeiro.org/forum
Gostaria que alguém me informasse o código disto para aplicar em meu fórum.

Grato.

Que medidas você tomou para corrigir o problema:
vazio

Apresente-nos imagens do problema (se necessário):
vazio

Endereço do fórum:
www.grandedown.forumeiros.com

Versão do fórum:
PHPBB3

marcelo! escreveu:Qual é sua questão:
Bom, vi um efeito bem interessante em um fórum, que ao passar o cursor em um link do menu de navegação, aparece um retângulo no fundo do link.
O fórum que ví é este: http://innovation.forumeiro.org/forum
Gostaria que alguém me informasse o código disto para aplicar em meu fórum.

Grato.

Que medidas você tomou para corrigir o problema:
vazio

Apresente-nos imagens do problema (se necessário):
vazio

Endereço do fórum:
www.grandedown.forumeiros.com

Versão do fórum:
PHPBB3

Legal, também gostaria de saber para botar no meu fórum PUNBB!

Boa tarde.

Aqui está :

Código:


#pun-head #pun-navlinks{
border-top: 2px solid #a71d02;
border-bottom: 2px solid #a71d02;
background: #a71d02;
height: 25px;
margin-top: -16px;
margin-bottom: -4px;
width: 920px;
padding: 0px;}

#pun-head #pun-navlinks li a{
margin: 0 0px 0 0;
color: white;
font-weight: bold;
position: relative;
top: 3px;
text-shadow: black 1px 1px 5px;
padding-right: 5px;
padding-left: 5px;
font-size: 12px;}

#pun-navlinks ul {text-align: center;}

#pun-head #pun-navlinks li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;
background: #831702;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

#pun-head #pun-navlinks a[href="/profile.forum?mode=register"]{background: #831702;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
border: 2px solid white;
-moz-box-shadow: 0px 0px 5px #0c0c0c;
-webkit-box-shadow: 0px 0px 5px #0c0c0c;
box-shadow: 0px 0px 5px #0c0c0c;}

Coloque o código em :
Painel de controle Visualização Cores "Aba" Folha CSS.

Coloque em seu conteúdo e salve.
Att.

Olá, MissFurby.
O código não modificou nada em meu fórum.

Leia estes tópicos:

https://ajuda.forumeiros.com/t42303-
https://ajuda.forumeiros.com/t42386-

Até mais!

Bom, nenhum tópico sugerido resolveu, pois minha dúvida é outra. Desejo que o efeito hover seja uma caixa que aparece por trás do link de navegação, como é mostrado no fórum que citei.

Boa tarde,

Aqui está o código que deseja:

Código:

#page-header .navar ul {
border-top: 2px solid #a71d02;
border-bottom: 2px solid #a71d02;
background: #a71d02;
height: 25px;
margin-top: -16px;
margin-bottom: -4px;
width: 920px;
padding: 0px;}

#page-header .navar ul li a{
margin: 0 0px 0 0;
color: white;
font-weight: bold;
position: relative;
top: 3px;
text-shadow: black 1px 1px 5px;
padding-right: 5px;
padding-left: 5px;
font-size: 12px;}

#pun-navlinks ul {text-align: center;}

#page-header .navar ul li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;
background: #831702;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

#page-header .navar ul  a[href="/profile.forum?mode=register"]{background: #831702;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
border: 2px solid white;
-moz-box-shadow: 0px 0px 5px #0c0c0c;
-webkit-box-shadow: 0px 0px 5px #0c0c0c;
box-shadow: 0px 0px 5px #0c0c0c;}

#i_icon_mini_new_message{margin-bottom: -5px;}

Até mais.

Olá!

Sugiro que utilize esse código que vou lhe passar ao invés do código do Solkis que pode modificar mais coisas alem do que você quer.

Olá!

Aceda à "Folha de estilo CSS":
Painel de Controle Visualização Imagens e cores Cores Folha de estilo CSS

Código:

.navlinks li a.mainmenu:hover{background:#831702;text-decoration:none;height:29px;padding:5px;text-shadow:black -1px -1px 3px;padding-top:10px;padding-bottom:12px;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px}

Salve.

Até mais.
Luciano98

Olá, muito obrigado aos que tentaram ajudar, funcionou perfeitamente, amigo Luciano, o modifiquei um pouco e ficou óptimo ao meu fórum.

Cordialmente, Marcelo.