Menu Widget em CSS

Bom dia! Gostaria de colocar um Menu legal como widget no meu fórum. Algum código para teste?


www.mundonegro.forumeiros.com

Olá!

Desculpe, não entendi o que o senhor deseja.
Poderia explicar melhor e se possível apresentar uma imagem?

Até mais.
Fraise

@Fraise claro! Me desculpe ter me expressado mal. É mais ou menos assim


Um menu para o RPG onde vou colocar links para shopping, locais de caça e etc. E esse código irei colocar em um widget no fórum e no portal.

Olá!

Primeiramente, adicione este código à sua folha de estilos:

Código:

.menu{margin:0; padding:0; width:300px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('http://i.imgur.com/EV5TaSW.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('http://i.imgur.com/EV5TaSW.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('http://i.imgur.com/EV5TaSW.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

E no código do widget:

Código:

<ul class="menu">
  <li><a href="Link" class="active"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
</ul>

Cumprimentos.
Fraise

@Fraise Hmmm , nao ficou muito legal não. Eu até tentei mudar os códigos e configurar mas ficou muito estranho. Veja se consegue pegar os códigos do menu widget desse fórum.

http://jogodostronos.forumeiros.com/forum

Olá!

Algo assim?

Código:

<style type="text/css">.fraise {float:right; width:160px; font-family: 'Verdana', serif; font-size:10px; text-align: center; background-color: #363636; border: 2px #8C705C solid; padding-top:3px; padding:3px; color: #0e2db0; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .fraise:hover {float:right; width:160px; font-family: 'Verdana', serif; font-size:12px; text-align: center; background-color: #363636; border: 2px #f4c8a9 solid; color: #8968CD; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } </style>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div style="text-align: center; font-size: 20 px; font-family: 'Verdana', cursive; color: #8C705C; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">Menu</div>
<div style="text-align: center; font-size: 34px; font-family: tahoma', cursive; color: #363636; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;"> </div>

Cumprimentos.
Fraise

Hey muito bom! Pode fechar amigo @Fraise