Dropdown raro

Há quanto tempo não postava aqui, não era? Bem, creio que irá compensar, pois embora não vá conseguir deixar muitos tutoriais prontos hoje, já comecei a adiantar várias deles, a sua maioria relativa a menus e afins. Anyway, o que trago hoje é um menu dropdown - daqueles em que cada aba contém vários sublinks - extremamente peculiar e distinto. Fica colocado no topo do blog, como se fosse parte da navbar, e tem imensos hovers, para além de que as sub-abas surgem com um desalinhamento propositado. Já vão ver na prévia. Eu achei a base do tutorial [aqui: www] mas tive de modificar muita coisa e descobrir por conta própria onde colocar os códigos, então agradeceria que me creditassem. E de qualquer forma, achei este menu magnífico para quem tem muitas páginas para organizar mas gosta de economizar espaço.

Prévia: www
Tutorial:

Procure por </head> e cole abaixo:

<style> /* Menu Dropdown */
.cf:before,.cf:after {content: &quot; &quot;;display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.menu,.submenu {margin: 0px;padding: 0px;list-style: none;}
.menu { /*tudo o que diz "menu" refere-se à parte da navbar que está sempre visível*/
margin-left: 150px;
width: 800px;
}
.menu &gt; li {
width: 200px;
height: 21px;
margin-top: -5px;
background: #5b6a7a;
float: left;
position: relative;
transform: skewX(25deg);
text-align: center;
}
.menu a { /*fonte do menu visível*/
display: block;
color: #fff;
text-shadow: 1px 1px 1px#3c4b59!important;
text-decoration: none;
font-family: Delius Swash Caps;
font-size: 14px;
margin-bottom: -2px;
}
.menu a:hover {
text-shadow: 1px 1px 1px #fff!important;
color: #a68374;
}
.menu li:hover {background: #855d4e;}
.menu &gt; li &gt; a {transform: skewX(-25deg);padding: 5px 15px 5px 30px;}
.submenu { /*O que diz "submenu" refere-se à parte pendente, que só é mostrada em hover*/
position: absolute;
width: 100px;
transform: skewX(-25deg);
transform-origin: left top;
}
.submenu li {
background-color: #566575;
position: relative;
overflow: hidden;
}
.submenu &gt; li &gt; a {padding: 4px 4px 4px 60px;}
.submenu &gt; li::after {
content: &#39;&#39;;
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 30px #2e3d4d;
}
  .submenu a {text-shadow: 1px 1px 1px #3c4b59!important;}
  .submenu a:hover {text-shadow: 1px 1px 1px #fff!important; color: #a68374;}
  .submenu &gt; li:nth-child(odd){transform: skewX(-25deg) translateX(0);}
  .submenu &gt; li:nth-child(odd) &gt; a {transform: skewX(25deg);}
  .submenu &gt; li:nth-child(odd)::after {right: -50%;transform: skewX(-25deg) rotate(3deg);}
  .submenu &gt; li:nth-child(even){transform: skewX(25deg) translateX(0);}
  .submenu &gt; li:nth-child(even) &gt; a {transform: skewX(-25deg);}
  .submenu &gt; li:nth-child(even)::after {left: -50%;transform: skewX(25deg) rotate(3deg);}
  .submenu,.submenu li {opacity: 0;visibility: hidden;}
  .submenu li {transition: .2s ease transform;}
  .menu &gt; li:hover .submenu,.menu &gt; li:hover .submenu li {opacity: 1;visibility: visible;}
  .menu &gt; li:hover .submenu li:nth-child(even){transform: skewX(25deg) translateX(15px);}
  .menu &gt; li:hover .submenu li:nth-child(odd){transform: skewX(-25deg) translateX(-15px);}
.bar_top { / * Fundo da barrinha do menu, navbar* /
width: 100%;
height: 28px;
background: #566575;
border-bottom: 4px solid #fff;
}
.bar_topd {
width: 900px;
margin: 0px auto;
}
  </style>

Agora vá a "Esquema", e adicione num gadget Html/Javascript o seguinte código:

<div style="width: 1365px; margin-right: -700px; margin-left: -95px; margin-top: -95px; position: fixed;">
<div class='bar_top'>
<div class='bar_topd'>
<ul class="menu cf">
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
<li>
<a title="TOOLTIP">NOME-PRINCIPAL</a>
<ul class="submenu">
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
<li><a href="/" title="TOOLTIP">NOME</a></li>
</ul>
</li>
</ul>
</div></div>
</div>

Pequena explicação: 

• Mude os links assinalados pela barrinha "/" e as maiúsculas
• Se não tiver tantas subclasses do menu, apague cada linha de <li> até </li>. Cuidado para não apagar mais nada.

Disse e repito, façam as modificações que quiserem quanto às cores e margens. Oh, podem ainda optar por mudar de fonte, mas caso queiram usar a que já aí está, caso não a tenham adicionada ao vosso HTML, procurem por <head> e abaixo colem:

<link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'/>

Jaa!