Menu estilo ao do fdf

Detalhes da questão

Endereço do fórum: http://beststyle.forumeiros.com/
Versão do fórum: PunBB

Descrição

gostaria do menu igual do FDF com o efeito em baixo, se puderem me ajudar agradeço..

caso não saibam me refiro a esse menu:



lembrando que minha versão PUNBB

Olá tente isto,

Código:

.navbar {
    background: #2D3134!important;
    border: none!important;
    margin: 0px -5px 0!important;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
  color: #ff0000;
}

,
desative todas as imagens que aparecem no menu como o inicio, portal,membros, no caso se você tiver

Meu prezado administrador,
O código de Lucanbr não vai funcionar, pois o código não é funcional com acordo da sua versão, ele pegou de PHPBB3, mas seu fórum é de versão PUNBB, tente este código abaixo:

Código:

#pun-navlinks a, #pun-navlinks a:visited {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#pun-navlinks a, #pun-navlinks a:visited {
    background-position: 0 45px;
  color: #fff;
}

Cumprimentos.
Cutie Tuteur

Bom dia Rafael!

Adicione à sua folha de estilos:

Código:

#pun-head #pun-navlinks {
    background: #000;
    color: #fff !important;
    padding: 10px;
}

a.mainmenu:link { color: #fff; text-decoration: none; }
a.mainmenu:link:hover { text-decoration: none; }
a.mainmenu:active { color: #FFF; }
#pun-navlinks li a { color: #FFF !important; }

a.mainmenu:hover {
border-bottom:#FFF !important;
}

Até mais.
Fraise

não houve resultado amigo. Mas já o codigo do @fraise resultou um pouco só falta o efeito que faz no menu e dou como encerrado o topico

Olá amigo

Tente usar esse codigo

Código:

#page-header a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}

Adicione o codigo no final da sua folha de estilo CSS

Até mais

não resultou em nada.

Adicione mais este:

Código:

#page-header a.mainmenu:hover {
transition-duration: 0.3s;
border-bottom:#369FCF !important;
}

Até mais.
Fraise

valeu. pode fechar.