Menu no Topo: Multinível com abas e sub abas [005]

Hi guys! Como vão todos? Espero que bem. =) Hoje venho trazer um modelo de menu horizontal. Ele possui mutinível com abas e sub abas, ou seja — Espaço pra caramba!!!! — Eu não é difícil de mudar as cores, mas se desejar mexer em outras coisas exigira um pouco de paciência. Só mexa se souber o que esta fazendo, ou pode dar erro no menu todo e ate mesmo no seu layout, aconselho fazer isso em um layout de teste. Os créditos estão no final da postagem.

Brevia do efeito

1. Escolha o blog qual vai aplicar, e vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

Códigos

<style type="text/css">
#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a {
margin:0;
padding:0;
position:relative}
#cssmenu{
height:49px; /*ALTURA DO MENU*/
border-radius:5px 5px 0 0; /*ARREDONDAMENTO DA BORDA*/
-moz-border-radius:5px 5px 0 0; /*ARREDONDAMENTO DA BORDA*/
-webkit-border-radius:5px 5px 0 0; /*ARREDONDAMENTO DA BORDA*/
background:#fefefe; /*COR DE FUNDO*/
background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));
background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);
border-bottom:2px solid #db000b; /*COR DA BORDA INFERIOR*/
width: 1120px; /*LARGURA, AJUSTE PARA SEU BLOG*/
margin-left: -30px; /*ALTERE PARA MAIS OU MENOS SE PRECISAR*/
}
#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}
#cssmenu a{
background:#fefefe; /*COR DE FUNDO*/
background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));
background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);
background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);
background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);
background:linear-gradient(top,#fefefe 0%,#ececec 100%);
color:#000; /*COR DE FONTE*/
display:inline-block;
font-family:Helvetica,Arial,Verdana,sans-serif; /*TIPO DE FONTE*/
font-size:12px; /*TAMANHO DA FONTE*/
line-height:49px; /*ALTURA, MANTENHA IGUAL ALTURA DO MENU*/
padding:0 18px;
text-decoration:none}
#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{
color:#000;/*COR DE FONTE*/
font-size:12px}
#cssmenu > ul > li:hover:after{content:'';
display:block;
width:0;height:0;
position:absolute;
left:50%;
bottom:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}
#cssmenu > ul > li.active:after{content:'';
display:block;
width:0;
height:0;
position:absolute;
left:50%;
bottom:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #db000b;
margin-left:-10px}
#cssmenu > ul > li.active > a{
-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
background:#ececec; /*COR DE FUNDO QUANDO ATIVO*/
background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:linear-gradient(top,#ececec 0%,#fef ef 100%)}
#cssmenu > ul > li:hover > a{
background:#ececec; /*COR DE FUNDO EM ESTADO HOVER*/
background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
background:linear-gradient(top,#ececec 0%,#fef ef 100%);
-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}
#cssmenu .has-sub{z-index:1}
width:200px;
top:100%;
left:0}
#cssmenu .has-sub:hover > ul{display:block}
#cssmenu .has-sub ul{
display:none;
position:absolute;
#cssmenu .has-sub ul li{*margin-bottom:-1px}
#cssmenu .has-sub ul li a{
background:#db000b;/*COR DE FUNDO SUB MENUS*/
border-bottom:1px dotted #ff0f1b; /*COR DE BORDA SUBMENU*/
filter:none;
font-size:11px;/*TAMANHO DE FONTE DOS SUBMENUS*/
display:block;
line-height:120%;
padding:10px;
color:#fff;/*COR DA FONTE DOS SUBMENUS*/
}
#cssmenu .has-sub ul li:hover a{
background:#a80008;/*COR DE FUNDO SUBMENUS HOVER*/
}
#cssmenu .has-sub .has-sub:hover > ul{display:block}
#cssmenu .has-sub .has-sub ul{
display:none;
position:absolute;
left:100%;
top:0}
#cssmenu .has-sub .has-sub ul li a{
background:#a80008;/*COR DE FUNDO SUBMENUS HOVER*/
border-bottom:1px dotted #ff0f1b;/*COR DE BORDA SUBMENU*/
}
#cssmenu .has-sub .has-sub ul li a:hover{
background:#8f0007; /*COR DE FUNDO SUBMENUS NÍVEL 2*/
}
</style>
<div id="cssmenu">
<ul>
<li class="active"><a href="ENDEREÇO DO BLOG"><span>PÁGINA INICIAL</span></a></li>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 1</span></a>
<ul>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>SUB ABA 1</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li class="last"><a href="#"><span>SUB ITEM 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>SUB ABA 2</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 3</span></a></li>
<li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 2</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 3</span></a></li>
</ul>
<li class="has-sub"><a href="#"><span>NOME DA ABA 3</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 3</span></a></li>
</ul>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 4</span></a>
<ul>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>SUB ABA 1</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 3</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 4</span></a></li>
<li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 5</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>SUB ABA 2</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 3</span></a></li>
<li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub"><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 5</span></a>
<ul>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 1</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>SUB ITEM 2</span></a></li>
<li class="last"><a href="#"><span>SUB ITEM 3</span></a></li>
</ul>
<li><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 6</span></a></li>
<li><a href="ENDEREÇO DO LINK"><span>NOME DA ABA 7</span></a></li>
</li>
</li></li></ul></div>

Salve e veja o resultado!

Créditos: Elaine Gaspareto