Colocar sub-menu dentro de outro sub-menu

Olá meus queridos jovens blogueiros, DonaTeka na área.


Antes de mais nada, já deixa o like ai no vídeo, se inscreve no canal e ativa o sininho para não perder os próximos vídeos. Sem mais delongas, simbora pro vídeo.


No vídeo de hoje, vou está colocando um sub-menu dentro de outro sub-menu. Pois é, galera, depois de muito estudo, finalmente consegui montar um código HTML que me permite incorporar um sub dentro de outro.


Esse tutorial vai ser bem facinho pois eu tive a preocupação de criar o sub-menu e deixa-lo prontinho, só pra você copiar e colar no seu blog.


Antes de mais nada, galera, se você tem um menu no seu blog, recomendo que você retire, pois irão entrar em conflitos, então você apaga o existente e faz esse.




CÓDIGO CSS


.clearfix:after{
content:".";
display: block;
clear: both;
height: 0px;
font-size: 0;
}
.menu,
.sub-menu {
list-style: none;
background: #3B0B0B;
}
.sub-menu {
list-style: none;
background: #3B0B0B;
}
.menu a {


display: block;
padding: 5px 10px;
color: #FFF;
font-family: Comic Sans Ms;
font-size: 16px;
font-weight: 100;
text-align: centro;
margin-left: 10px;
list-style: none;
}
.menu li {
position: relative;
}
.menu > li {
float: left;
}
.menu > li:hover {
background: #DF7401;
list-style: none;
}
.menu li:hover > .sub-menu {
display: block;
list-style: none;
}
.sub-menu{
position: absolute;
min-width: 150px;
z-index:5;
display: none;
padding: 10px;
list-style: none;
}
.sub-menu li:hover {
background: #DF7401;
z-index:5;
}
.sub-menu .sub-menu {
top: 0;
left: 100%;


}




CÓDIGO HTML


<div class='menu-container'>
<ul class='menu clearfix'>
<li><a href='#'>Inicio</a></li>
<li><a href='#'>Musicas</a></li>
<li><a href='#'>Moda</a></li>


<li><a href='#'>Galeria</a>
<ul class='sub-menu clearfix'>
<li><a href='#'>Videos</a></li>
<li><a href='#'>Fotos</a></li>


<li><a href='#'>Eventos</a>
<ul class='sub-menu'>
<li><a href='#'>Janeiro</a></li>
<li><a href='#'>Fevereiro</a></li>
<li><a href='#'>Março</a></li>
<li><a href='#'>Abril</a></li>
<li><a href='#'>Maio</a></li>
<li><a href='#'>Junho</a></li>
</ul>
</li>
<li><a href='#'>Like</a></li>
</ul>
</li>
<li><a href='#'>Dicas</a></li>
<li><a href='#'>Contato</a></li>
</ul>


</div>












OMO LINKAR OS MENUS (DEIXAR FUNCIONANDO)










Comentários

Postar um comentário