Pesquisar: ]]></b:skin> e ACIMAdele cole:
__________________________________________________________________________________________
/*----- MBTDrop Down Menu ----*/
#mbtnavbar{
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li{
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav lia, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav lia:hover, #mbtnav li a:active {
background: #FFCC00;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li{
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav liul a {
width: 140px;
}
#mbtnav liul ul {
margin: -25px 0 0 161px;
}
#mbtnavli:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnavli.sfhover ul ul ul {
left: -999em;
}
#mbtnavli:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnavli.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnavli:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav lili a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #FFCC00;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1pxdotted #333;
}
#mbtnav lili a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Agora- va ate Layout, adicione um novo element HTML/JavaScript e cole o seguinte codigo:
__________________________________________________________________________________________
<divid='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Categoria 01</a>
<ul>
<li><a href='#'>Sub-Categoria 01</a></li>
<li><a href='#'>Sub-Categoria 02</a></li>
<li><a href='#'>Sub-Categoria 03</a></li>
<li><a href='#'>Sub-Categoria 04</a></li>
<li><a href='#'>Sub-Categoria 05</a></li>
</ul>
</li>
<li>
<ahref='#'>Categoria 02</a>
<ul>
<li><a href='#'>Sub-Categoria01</a></li>
</ul>
</li>
<li>
<ahref='#'>Categoria 03</a>
</li>
</ul>
</div>
__________________________________________________________________________________________
Onde estiver de Vermelho substitua pelo nome da categoria e/ou subcategoria;
Onde estiver de Rosa substitua pelo link a ser colocado nas categorias e/ou subcategorias;
Para adicionar mais categorias, abaixo de "<ul id='mbtnav'>"
____________________________________
<li>
<ahref='#'>Categoria</a>
</li>
____________________________________
E para adicionar mais subcategorias, cole :
____________________________________
<ul>
<li><a href='#'>Sub-Categoria 01</a></li>
____________________________________
dentro da categoria e edite como ja foi ensinado acima.
0 comentários:
Postar um comentário
Os leitores são responsáveis pelos seus comentários postados neste site.
O Connect - Technology não se responsabiliza pelo conteúdo colaborativo apresentado e ainda se reserva ao direito de deletar, sem aviso ou consulta prévia, comentários com conteúdo ofensivo, palavras de baixo calão, spams ou, ainda, que não sejam relacionados ao tema proposto pelo post do blog ou notícia.