Como personalizar o menu assim

Qual é minha questão:
Bem, gostaria de saber como faz um menu assim? :
http://demo.nicetheme.com/forum?theme_id=182355

Obs: Não é por meio de Imagens...

Endereço do meu fórum:
http://heroesofolympus.forumeiros.com

Versão do fórum:
PHPBB2

tente

Código:

#page-header .navbar ul.linklist {
border-bottom: 0px;
margin-bottom: -4px;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header ul.navlinks {
top: -10px;
position: relative;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.navlinks {
border-bottom: 1px solid rgb(255, 208, 158);
font-weight: 700;
text-align: center;
}

Desculpe amigo, mais não funcionou

Olá Chrome,

Poderia nos fornece a sua folha CSS?

Passe sua CSS

até

Substitua por

Código:

.bodyline {
-moz-box-shadow: 0px 3px 20px #000000;
-webkit-box-shadow: 0px 3px 20px #000000;
}

a:link,a:active,a:visited {
text-decoration: none;
}


    blockquote {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.post {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }
.button2, .button3{
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    cite {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }

    .spoiler {
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    .spoiler dt {
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    }
    .button2{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.codebox{-moz-border-radius:10px;-webkit-  border-radius:10px;border-radius:10px}

a.mainmenu img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

a:hover {
color: #0000FF;
text-shadow : 0px 0px 15px #000000;
}

/*Menu*/
#page-header .navbar ul.linklist {
border-bottom: 0px;
margin-bottom: -4px;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header ul.navlinks {
top: -10px;
position: relative;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.navlinks {
border-bottom: 1px solid rgb(255, 208, 158);
font-weight: 700;
text-align: center;
}
#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url('http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png') no-repeat top center;
left: -30px;
position: relative;
border-bottom: 0px solid #b2d1ed;
margin-bottom: -100px;
}

Até Mais

Olá novamente, este CSS proposto pelo senhor, ainda não funcionou...

Olá,

O senhor terá que desativar o menu das imagens e ativar o menu de textos, siga os passos:
CPainel ->> Visualização ->> Página inicial ->> Cabeçalho e navegação
Em "Exibir apenas as imagens no menu de navegação" marque a opção não e salve!

Feito isto, aconselho a retirar as imagens do menu.

---

Agora podemos adicionar o CSS utilizado no estilo do menu. Aceda a folha de estilo CSS:

Código:

#page-header .navbar ul.navlinks {
width: 962px;
height: 36px;
background: url(http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png) 50% 0% no-repeat;
left: -30px;
position: relative;
border-bottom: 0px solid rgb(178, 209, 237);
margin-bottom: -100px;
}
#page-header .navbar ul.linklist li a {
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
text-shadow: rgb(85, 85, 85) 0.1em 0px 0.2em;
}

CPainel ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de Estilo CSS

Até mais.

#Título do tópico alterado!

Olá amigo... Infelizmente, não está a funcionar.

Olá,

Troque o código passado por este:

Código:


.bodyline table:nth-of-type(2) td {
  background: url("http://i49.servimg.com/u/f49/16/79/58/45/ie_nav10.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    border-bottom: 0 solid #B2D1ED;
    height: 36px;
    left: -30px;
    margin-bottom: -100px;
    position: relative;
  width: 962px;}

.bodyline {
    -moz-box-shadow: 0px 3px 20px #000000;
    -webkit-box-shadow: 0px 3px 20px #000000;
    }