Menu colorido com sub abas

<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>

Código do box flutuante

CÓDIGO DA CAIXA CURTIR
(altere onde aparece o nome da minha fanpage pelo nome da sua ou gere a sua aqui nesta página)

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FElaineGaspareto%2F&tabs&width=530&height=300&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=true&appId=1566384683669266" width="530" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


CÓDIGO CSS
(colar acima de ]]></b:skin>)

/*Início do Código CSS*/
#ccexitpop{
font-family: 'Muli', sans-serif;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#ccexitpop .overlay{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:#000;
opacity:0.7;
z-index:9999999;
}
#ccexitpop .popbox{
z-index:9999999;
border-bottom:5px solid#3b5998;
width:540px;
height:330px;
background:#fafafa;
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
}
#ccexitpop .popbox-title{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3b5998), color-stop(1, #305196));
background:-moz-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-webkit-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-o-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-ms-linear-gradient(top, #3b5998 5%, #305196 100%);
background:linear-gradient(to bottom, #3b5998 5%, #305196 100%);
color:#fff;
padding:5px;
margin:0;
border-radius:4px 4px 0 0;
text-align:center;
}
#ccexitpop h2{
font-family: 'Muli', sans-serif;
color:#fff;
font-size:15px;
margin:5px;
text-transform:uppercase;
font-weight:400;
}
#ccexitpop .popbox-body{
padding:20px;
padding-bottom:10px;
}
#ccexitpop .popbox-close{
position:relative;
text-align:center;
width:10px;
float:right;
}
.cc-subs{
width:100%;
float:center !important;
}
.popbox-title img{
width:30px;
position:relative;
top:5px;
right:4px;
border:0;
}
/*Fim do Código CSS*/



CÓDIGO JAVASCRIPT
(colar acima de </head>)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script src='http://yourjavascript.com/08011672710/ouibouncebyelainegaspareto.js'></script>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'/>


CÓDIGO HTML
(colar acima de </body>)

<!-- Janela pop up para curtir a fanpage by Elaine Gaspareto -->
<div id='ccexitpop'>
<div class='overlay'></div>
<div class='popbox'>
<div class='popbox-title'>
<h2><img src='https://2.bp.blogspot.com/-vCTwLM5ttZY/WbWRlRO8r6I/AAAAAAABZ40/NvqHu9rFn50hy0WUGM-GCSgkcmfpNi0WgCLcBGAs/s1600/facebook-icon.png'/>Antes de sair gostaria de curtir a fanpage do blog?</h2>
</div><!--Title-->
<div class='popbox-body'>
<div class='cc-subs'>
<!--//Área do código do box da fanpage//-->

AQUI VOCÊ COLA O CÓDIGO CONVERTIDO DE SUA CAIXA DE CURTIR A FANPAGE DO FACEBOOK

<!--//Final da área do código do box da fanpage//-->
</div><!--Text right-->
</div><!--Body-->
</div><!--Popbox-->
</div><!--ccexitpop-->
<script>
    var _ouibounce = ouibounce(document.getElementById('ccexitpop'), {
    aggressive: true,
    timer: 0,
    callback: function() { console.log('ouibounce fired!'); }
    });
    $('body').on('click', function() {
    $('#ccexitpop').hide();
    });
    $('#ccexitpop .popbox-close').on('click', function() {
    $('#ccexitpop').hide();
    });
    $('#ccexitpop .popbox').on('click', function(e) {
    e.stopPropagation();
    });
    </script>
<!--Final do Código HTML-->


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage