Menu igual a este

Qual é minha questão:
Gostaria de um menu igual ao deste fórum: http://www.narutorpgakatsuki.com

Endereço do meu fórum:
http://opiece-rpg.forumeiros.com

Versão do fórum:
PHPBB2

Olá!
O senhor deve desenvolver o menu neste site: http://cssmenumaker.com/builder/357575

Desenvolvendo o menu maker, me envie o HTML e o CSS do mesmo para que eu possa lhe ensinar a instala-lo.

Até mais.

HTML do Menu de Cadastrados:

Código:

<div id='cssmenu'>
<ul>
  <li class='active'><a href='http://opiece-rpg.forumeiros.com/'><span>Ínicio</span></a></li>
  <li class='has-sub'><a href='http://opiece-rpg.forumeiros.com/f12-sistema-de-jogo'><span>Sistema de Jogo</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Explicações</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Listas</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='http://opiece-rpg.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a></li>
  <li><a href='http://opiece-rpg.forumeiros.com/privmsg?folder=inbox'><span>Mensagens</span></a></li>
  <li class='last'><a href='http://opiece-rpg.forumeiros.com/login?logout'><span>Logout</span></a></li>
</ul>
</div>

HTML do Menu de Convidados:

Código:

<div id='cssmenu'>
<ul>
  <li class='active'><a href='http://opiece-rpg.forumeiros.com/'><span>Ínicio</span></a></li>
  <li class='has-sub'><a href='http://opiece-rpg.forumeiros.com/f12-sistema-de-jogo'><span>Sistema de Jogo</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Explicações</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Listas</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='http://opiece-rpg.forumeiros.com/register'><span>Registrar</span></a></li>
  <li class='last'><a href='http://http://opiece-rpg.forumeiros.com//login'><span>Login</span></a></li>
</ul>
</div>

CSS:

Código:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}


Olá!
Aceda a Folha de Estilo CSS:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

Código:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}

e Valide!

Aceda a Gestão dos códigos JavaScript:

Painel de Controle Módulos HTML e JavaScript Gestão dos códigos JavaScript

Investimento: Marque em todas as páginas.
Código:

Código:

jQuery(document).ready(function(){if(jQuery('#logout').length){var m="<div id='cssmenu'>
<ul>
  <li class='active'><a href='http://opiece-rpg.forumeiros.com/'><span>Ínicio</span></a></li>
  <li class='has-sub'><a href='http://opiece-rpg.forumeiros.com/f12-sistema-de-jogo'><span>Sistema de Jogo</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Explicações</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Listas</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='http://opiece-rpg.forumeiros.com/profile?mode=editprofile'><span>Perfil</span></a></li>
  <li><a href='http://opiece-rpg.forumeiros.com/privmsg?folder=inbox'><span>Mensagens</span></a></li>
  <li class='last'><a href='http://opiece-rpg.forumeiros.com/login?logout'><span>Logout</span></a></li>
</ul>
</div>"}else{var m="<div id='cssmenu'>
<ul>
  <li class='active'><a href='http://opiece-rpg.forumeiros.com/'><span>Ínicio</span></a></li>
  <li class='has-sub'><a href='http://opiece-rpg.forumeiros.com/f12-sistema-de-jogo'><span>Sistema de Jogo</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Explicações</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Listas</span></a>
            <ul>
              <li><a href='#'><span>Depois</span></a></li>
              <li class='last'><a href='#'><span>Depois</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='http://opiece-rpg.forumeiros.com/register'><span>Registrar</span></a></li>
  <li class='last'><a href='http://http://opiece-rpg.forumeiros.com//login'><span>Login</span></a></li>
</ul>
</div>"};jQuery('.mainmenu').replaceWith(m)});

e Salve!

Até mais.

O menu está bugado, fica repetindo infinitamente. Meu CSS:

Código:

/* Corpo do Fórum */
.bodyline {position: relative; background-image: url(http://i50.tinypic.com/2r56za1.jpg)!important;}
.bodylinewidth {width: 890px;}
body {background-attachment: fixed; background-image: url(http://i46.tinypic.com/9vl8qx.png)!important; margin: 0;}
/* Cursores */
body {cursor: url(http://cur.cursors-4u.net/games/gam-3/gam249.an), url(http://cur.cursors-4u.net/games/gam-3/gam249.png), auto;}
a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-4/gam375.cur), url('URL CURSOR GIF/PNG'), auto;}

/* Textos */
.secondarytitle {padding-top: 4px;}
.cattitle {padding-top: 4px; text-color: white;}

/* Outros */
.forumline {border: transparent;}
.margem {padding-bottom: 10px;}
.margem2 {padding-top: 3px;}
.button2 {border-radius: 5px;}
#search {padding-bottom: 8px;}
h2 {font-weight: normal !important; text-decoration: none!important;}
a, a:hover {
text-decoration: none !important;
}
   
/* Avatar do Último Membro */
.avat-miembro {float: left;}
.avat-miembro img {position: relative; top: 12px; width: 39px; height: 39px; padding: 1px; margin: 0 5px;}
.avat-membro {float: left;}
.avat-membro img {position: relative; top: 2px; width: 33; height: 33px; padding: 1px; margin: 0 5px;}

#search {}

#search input[type="text"] {
    background: url(http://i49.tinypic.com/51yof8.jpg) no-repeat 10px 6px rgb(60, 38, 14);
    background-position: 9px 4px;
    margin-top: 0px;
    margin-right: 24px;
    opacity: .7;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 6px 6px 30px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

/* Menu de Navegação */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {margin: 0; padding: 0; position: relative;}
#cssmenu {height: 63px; background-image: url(http://i49.tinypic.com/2l7xb8.png);}
#cssmenu:after,
#cssmenu ul:after {content: ''; display: block; clear: both;}
#cssmenu a {display: inline-block; font-family: Pirata One, cursive; font-size: 18px; line-height: 43px; padding: 0 20px; color: #c3966e; text-shadow:0px 0px 5px #000000; text-decoration: none!important;}
#cssmenu ul {list-style: none;}
#cssmenu > ul {float: left;}
#cssmenu > ul > li {float: left;}
#cssmenu > ul > li.active > a {}
#cssmenu > ul > li:hover > a {background: #d5b69b; opacity: 0.4;}
#cssmenu .has-sub {z-index: 1;}
#cssmenu .has-sub:hover > ul {display: block;}
#cssmenu .has-sub ul {display: none; position: absolute; width: 200px; top: 100%; left: 0;}
#cssmenu .has-sub ul li {*margin-bottom: -1px;}
#cssmenu .has-sub .has-sub:hover > ul {display: block;}
#cssmenu .has-sub .has-sub ul {display: none; position: absolute; left: 100%; top: 0;}
#search {display: inline-block; float: right; padding-top: 8px;}
#cssmenu .has-sub ul li:hover a {background: #a6804f;  font-family: Economica, sans-serif; font-size: 13px; color: #ecddd0;} /* Cor da Sub-Categoria Hover */
#cssmenu .has-sub ul li a {background: #deb37c; border-bottom: 1px dotted #ac8c62; filter: none; font-size: 13px; display: block; line-height: 120%; padding: 10px; font-family: Economica, sans-serif; color: #ecddd0; text-shadow: 1px 1px 0px #382616;} /* Cor da Sub-Categoria No-Hover */
#cssmenu .has-sub .has-sub ul li a:hover {background: #81633c; font-family: Economica, sans-serif; font-size: 13px; color: #ecddd0;} /* Cor da Sub-Sub-Categoria Hover */
#cssmenu .has-sub .has-sub ul li a {background: #a6804f; border-bottom: 1px dotted #896a41; font-family: Economica, sans-serif; font-size: 13px; color: #ecddd0;} /* Cor da Sub-Sub-Categoria No-Hover */

http://opiece-rpg.forumeiros.com/

Apenas a barra de membros cadastrados está sendo mostrada, quando desconecto, ainda consigo ver o Perfil, MPs e Logout, mesmo não estando logado.