Criação de um menu personalizado

[quadrado=Minha questão]
Olá amigos.
Vi um menu detalhado e gostei ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Imagem: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (o que tá a vermelho)

Será possível adicionar um no meu fórum? De preferência com um hover e o ultímo botão (azul) com 4 submenus.
Agradecido.

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB[/quadrado]

Procurando alguém que consiga dar uma ajudinha.

Posso te fazer um semelhante só que sem submenus, quer mesmo assim ?

Claro amigo [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
Se depois se quiser mudar algo faremos por CSS.

Feito.

Vá até os templates Gerais > overall_header e clique na engrenagem de editar.

Lá, em baixo de

Código:

<title>{SITENAME_TITLE}{PAGE_TITLE}</title>

cole o seguinte código:

Código:

<!-- Fonte do Layout -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700,400italic,500italic,700italic' rel='stylesheet' type='text/css'>

Logo após isso, procure por

Código:

<a id="top" name="top" accesskey="t"></a>

 em baixo desse código, cole o seguinte:

Código:

<div class="menu">
    <ul class="menu-navegador">
        <a href="LINK AQUI">
        <li>StarT</li>
        </a>
        <a href="LINK AQUI">
        <li>Counter-strike</li>
        </a> 
        <a href="LINK AQUI">
        <li>Counter-strike Condition zero</li>
        </a> 
        <a href="LINK AQUI">
        <li>Counter-strike Source</li>
        </a> 
        <a href="LINK AQUI">
        <li>Counter-strike GO</li>
        </a> 
    </ul>
  </div>

Pronto, salve e publique o template. Agora vá na página da Folha de Estilo CSS e cole ao final da página os seguintes códigos:

Código:

/* Menu */
.menu {
color: #FFF;
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#D3D3D3));
background-image: -webkit-linear-gradient(top, #F4F4F4, #D3D3D3);
background-image: -moz-linear-gradient(top, #F4F4F4, #D3D3D3);
background-image: linear-gradient(to bottom, #F4F4F4, #D3D3D3);
background-repeat: no-repeat;
background-position: left top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
   width:100%;
   height:45px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.17);
}
.menu-navegador {
   float: right;
   margin-top: 0;
   z-index: 100;
   width:100%;
}
.menu-navegador ul {
   text-decoration:none;
}
.menu-navegador li {
   text-transform: uppercase;
   cursor: pointer;
   float: left;
   color: #000;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   height: 44px;
   line-height: 44px;
   padding: 0 18px;
   font-family: Ubuntu;
   border-left: 1px solid rgba(255, 255, 255, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.17);
}
.menu-navegador li:hover {
background-color: #F4F4F4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ECECEC));
background-image: -webkit-linear-gradient(top, #FFF, #ECECEC);
background-image: -moz-linear-gradient(top, #FFF, #ECECEC);
background-image: linear-gradient(to bottom, #FFF, #ECECEC);
   color: #008ac9;
}
.menu-navegador a {
   color: #FFF;
}
.menu-navegador a:hover {
   color: #FFF;
}
/* FIM - Menu */

Pronto, só salvar. Se estiver com dúvidas, só avisar.

Amigo realmente tá muito bom.
Mas repare a a barra de criar conta e da zona do perfil etc desapareceu.
Veja melhor: http://gyazo.com/ac541535e51104ae2add2a412447b826

Adicione ao CSS:

Código:


.menu {
color: #FFF;
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#D3D3D3));
background-image: -webkit-linear-gradient(top, #F4F4F4, #D3D3D3);
background-image: -moz-linear-gradient(top, #F4F4F4, #D3D3D3);
background-image: linear-gradient(to bottom, #F4F4F4, #D3D3D3);
background-repeat: no-repeat;
background-position: left top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
  width:100%;
  height:45px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.17);
z-index: 100;
top: 0;
}


Fantástico Je4n!
Muito obrigado pela ajuda!

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]