Boas tardes vim trazer um outro modelo de menu com submenu.
Letras com sombra ,hover no submenu,tirei a ideia do menu simples e ai desenvolvi este modelo com submenu como mostra imagem acima ...
Veja online:  ENTRE AQUI...

Antes de tudo faça uma cópia do seu template...

Vamos começar ,entre no seu painél depois em modelo e click editar html:
Procure este código:


Agora coloque o meu código acima :

/* navegaçao http://best-tuga.blogspot.pt/*/
#navegaçao{background:url(http://i.imgur.com/XO8H5Ck.jpg) repeat;
;width:100%;height:60px;display:block;padding:0;margin:0 0 22px 0;}
#menub-t{float:left;width:100%;height:60px;display:block;padding:0;margin-left:80px;}
#menub-t ul{float:left;margin:0;padding:0;}
#menub-t li{text-decoration:none;float:left;font-size:20px;font-family:'Bobber',arial;list-style:none;text-shadow:0 -1px 1px #ee82ee;line-height:60px;margin:0;padding:0;}
#menub-t li:hover{background:#afeeee;}
#menub-t li a, #menub-t li a:link{color:#FCFCFC;display:block;margin:0;padding:0 10px;text-decoration:none;}
#menub-t li a:hover, #menub-t li a:active, #menub-t .current_page_item a  {color:#111;padding:0 10px;}
#menub-t li li{border-bottom:1px solid #000;}
#menub-t li li a, #menub-t li li a:link, #menub-t li li a:visited{font-size:17px;text-decoration:none;background:#afeeee;color:#000;min-width:140px;margin:0;padding:0px 10px;line-height:40px;position: relative;}
#menub-t li li a:hover, #menub-t li li a:active {background:#FCFCFC;}
#menub-t li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:180px;margin:0px;padding:0px;}
#menub-t li:hover ul, #menub-t li li:hover ul, #menub-t li li li:hover ul, #menub-t li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul{left:auto;}
#menu li:hover, #menu li.sfhover{position:static;}

Agora vamos ao html procure este código:


E agora acima dele coloque meu código:

<div id='navegaçao'>
<div id='menub-t'>
<ul>
<li><a href='#'>Inicio</a></li>
<li><a href='#' title='seu titulo'>best-tuga</a></li>
<li><a>best-tuga1 ➨</a>
<ul>
<li><a href='#' title='seu titulo'>best-tuga1</a></li>
<li><a href='#' title='seu titulo'>best-tuga2</a></li>
<li><a href='#' title='seu titulo'>best-tuga3</a></li>
</ul>
</li>
<li><a>best-tuga 2 ➨</a>
<ul>
<li><a href='#' title='seu titulo'>best-tuga1</a></li>
<li><a href='#' title='seu titulo'>best-tuga2</a></li>
</ul>
</li>
<li><a>best-tuga 3 ➨</a>
<ul>
<li><a href='#' title='seu titulo'>best-tuga1</a></li>
<li><a href='#' title='seu titulo'>best-tuga2</a></li>
<li><a href='#' title='seu titulo'>best-tuga3</a></li>
</ul>
</li>
<li><a>best-tuga 4 ➨</a>
<ul>
<li><a href='#' title='seu titulo'>best-tuga1</a></li>
<li><a href='#' title='seu titulo'>best-tuga 2</a></li>
<li><a href='#' title='seu titulo'>best-tuga3</a></li>
</ul>
</li>
<li><a href='#' title='seu titulo'>best-tuga1</a></li>
<li><a href='#' title='seu titulo'>best-tuga 2</a></li>
<li><a href='#' title='seu titulo'>best-tuga3</a></li>
</ul>
</div>
</div>
Salve e visualize ...
Notas: onde tiver este sinal (# )coloca seu link...
onde tiver isto  (seu titulo) coloca titulo quiser...
onde diser (best-tuga1 2 3 4 )coloque nome quiser...

Foi esta a partilha que trouxe agora ,até mais...

Menu com submenu b-t

1
► Cartita

1 comentários:

comentários

bom fim semana

 
 
Back to top

Estatísticas

  • Postagens
  • Comentários
  • Visualizações
🔗 Contato✔ Apoio 🔗
Reservado © 2016 ❝ Autôr