Menu colorido com sub abas

Views:
<style>
/* Menu Colors Dropdown by elainegaspareto.com
---------------------------------------------- */
#menu {
background: #836FFF; /*COR DE FUNDO DO MENU*/
height: 50px; /*ALTURA DO MENU*/
z-index: 999;
width: 105%; /*LARGURA DO MENU, AJUSTE SE PRECISAR*/
margin: 0 auto;
margin-left: -25px; /*POSICIONAMENTO A ESQUERDA, AJUSTE SE PRECISAR*/
font: normal 13px Montserrat; /*TAMANHO E TIPO DA FONTE DO MENU*/
color: #fff;
}
#menu ul {
height: 50px; /*ALTURA, MANTENHA COMO ACIMA*/
width: 105%; /*LARGURA, MANTENHA COMO ACIMA*/
}
#menu ul ul {display: none;}
#menu ul li:hover > ul {display: block;}
#menu ul, #menu li {
margin: 0 auto;
padding: 0 0;
list-style: none;
}
#menu li {
float: left;
display: inline;
position: relative;
text-transform: none;
}
#menu a {
display: block;
line-height: 50px; /*ALTURA DA LINHA, MANTENHAM IGUAL A ALTURA DO MENU*/
padding: 0 30px; /*DISTANCIA DE UMA CASA PARA OUTRA, ALTERE SE DESEJAR*/
text-decoration: none;
color: #ffffff; /*COR DA FONTE DOS TÍTULOS*/
}
#menu ul.menus {
height: auto;
overflow: hidden;
width: 190px;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li {
display: block;
width: 100%;
font: normal 13px Montserrat; /*TAMANHO DA FONTE DAS SUB ABAS*/
text-transform: none;
text-shadow: none;
}
#menu ul.menus li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#menu .menus li:hover ul {display: block;}
#menu ul.menus a {
color: #ffffff; /*COR DA FONTE DAS SUB ABAS*/
line-height: 40px; /*ALTURA DAS SUB ABAS*/
 display: block;
}
#menu ul.menus a:hover {
background: #222; /*COR DE FUNDO DAS SUB ABAS AO PASSAR O MOUSE*/
color: #ffffff; /*COR DA FONTE DAS SUB ABAS AO PASSAR O MOUSE*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu li a:hover {
color: #ffffff; /*COR DA FONTE DAS ABAS AO PASSAR O MOUSE*/
background: #0099cc;  /*COR DE FUNDO DAS ABAS AO PASSAR O MOUSE*/
}
li.primeira a {background: #4f7ca1;}
li.segunda a {background: #008B00;}
li.terceira a {background: #FF4500;}
li.quarta a {background: #8B2323;}
li.quinta a {background: #72347d;}
li.sexta a {background: #FF1493;}
li.setima a {background: #E71838;}
li.oitava a {background: #fc0;}
li.nona a {background: #836FFF;}
</style>

<nav id="menu">
<ul>

<li class="primeira"><a href="LINK AQUI">Aba 1</a></li>

<li class="segunda"><a href="LINK AQUI">Aba 2</a></li>

<li class="terceira"><a href="#">Drop Down 1</a>
<ul class="menus">
<li><a href="LINK AQUI">Sub aba 1</a></li>
<li><a href="LINK AQUI">Sub aba 2</a></li>
<li><a href="LINK AQUI">Sub aba 3</a></li>
<li><a href="LINK AQUI">Sub aba 4</a></li>
<li><a href="LINK AQUI">Sub aba 5</a></li>
<li><a href="LINK AQUI">Sub aba 6</a></li>
</ul>
</li>

<li class="quarta"><a href="#">Drop Down 2</a>
<ul class="menus">
<li><a href="LINKAQUI">Tab 1</a></li>
<li><a href="LINKAQUI">Tab 2</a></li>
<li><a href="LINKAQUI">Tab 3</a></li>
<li><a href="LINKAQUI">Tab 4</a></li>
<li><a href="LINKAQUI">Tab 5</a></li>
<li><a href="LINKAQUI">Tab 6</a></li>
</ul>
</li>

<li class="quinta"><a href="LINK AQUI">Aba 3</a></li>

<li class="sexta"><a href="#">Drop Down 3</a>
<ul class="menus">
<li><a href="LINK AQUI">Sub aba 1</a></li>
<li><a href="LINK AQUI">Sub aba 2</a></li>
<li><a href="LINK AQUI">Sub aba 3</a></li>
<li><a href="LINK AQUI">Sub aba 4</a></li>
</ul>
</li>

<li class="setima"><a href="LINK AQUI">Aba 4</a></li>

<li class="oitava"><a href="#">Drop Down 4</a>
<ul class="menus">
<li><a href="LINK AQUI">Sub aba 1</a></li>
<li><a href="LINK AQUI">Sub aba 2</a></li>
<li><a href="LINK AQUI">Sub aba 3</a></li>
<li><a href="LINK AQUI">Sub aba 4</a></li>
</ul>
</li>

<li class="nona"><a href="LINK AQUI">Aba 5</a></li>

</ul>
</nav>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage