Como criar um menu semelhante á esse utilizando css

Gostaria de saber como fazer um menu semelhante á esse utilizando código css.
Há algum tempo que venho procurando saber como, mas acho que somente os membros da FDF podem me tirar esta dúvida.

Imagem:



att,
marcelo!

Olá, poderia dar o endereço do site ou fórum que você viu este efeito?

Até mais.

aqui está: http://narutorpgfuture.forumeiros.com/portal.htm

abraços.

Crie um widget , e coloque o seguinte código:

Código:


<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 3px; -webkit-border-vertical-spacing: 3px; color: #1a0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"></span>
<table border="0" cellpadding="0" cellspacing="0" style="border-bottom-color: rgb(73, 100, 255); border-left-color: rgb(73, 100, 255); border-right-color: rgb(73, 100, 255); border-top-color: rgb(73, 100, 255); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><tbody style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<tr style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td colspan="2" name="conteudo NRF" style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<ul class="ulmenu" id="nav" style="list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; top: 0px; width: 150px; z-index: 999;">
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/portal.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Portal</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/forum.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Fórum</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/regras-gerais-f10/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Regras Gerais</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/apresentacoes-f1/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Apresentações</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/profile.forum?mode=editprofile" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Perfil</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/parcerias-f4/como-funciona-o-sistema-de-parcerias-t133.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Parceria</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/mercado-geral-f24/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Mercado Geral</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/area-livre-f118/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Area Livre</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/prisao-f36/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Prisão</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://www.top30.com.br/cgi/votar.cgi?ID=106481" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;" target="_area">Vota Top 30</a></li>
</ul>
</div>
</td><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_014.png" style="background-repeat: no-repeat repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;" width="21"> </td></tr>
<tr style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_015.png" height="23" style="background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;" width="21"> </td><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_016.png" colspan="2" height="23" style="background-repeat: repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;"> </td></tr>
</tbody></table>

Bom é só modificar, tudo o código está se referindo a este fórum que você me mostrou, é só modificar os links e os nomes colocando tudo se referindo ao seu fórum.
Espero ter ajudado.

Até mais.

Olá, inseri o código mas não está aparecendo os sub menus quando passo o mouse por cima das opçoes. olhe como ficou:

como pode ver a opçao que deveria ter sub menus "forum" esta apagada, junto com a opçao "Portal".

até mais.

Olá!
Porque não criar o menu sem códigos? Seria muito mais facil. E com aquele menu não me recordo nenhum codigo de css que fassa aquele sistema.
Porem posso-lhe ajudar a criar o menu igualzinho só que sem codigos.

O menu é constituido por simplesmento só por imagens, ora veija:

Apenas lhe dei duas imagens daquele menu para exemplo.
Se tiver interessado no menu para ser criado sem css, é só dizer

SantolaZ escreveu:Olá!
Porque não criar o menu sem códigos? Seria muito mais facil. E com aquele menu não me recordo nenhum codigo de css que fassa aquele sistema.
Porem posso-lhe ajudar a criar o menu igualzinho só que sem codigos.

O menu é constituido por simplesmento só por imagens, ora veija:

Apenas lhe dei duas imagens daquele menu para exemplo.
Se tiver interessado no menu para ser criado sem css, é só dizer

Olá, não sei se prestou atenção ao tópico, mas não é deste menu horizontal que me referi e sim do vertical, mostrado nas imagens das postagens acima.

aguardo uma resposta para o css que fique idêntico ao mostrado para que possa modificá-lo sem problemas.

att;
marcelo!