Menu com submenus usando CSS no Blogger

DEMO

Um menu bem facinho de instalar e que pode fazer a diferença se você tem muitos links para disponibilizar a seus visitantes. Instale-o diretamente no HTML/Javascript.

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<style>
/*Menu ------------------------------------------------*/
#nav {
background: #808080;
width:100%;
font: bold 14px "ms sans serif", verdana, arial;
color: #AA0000;
margin: 0 auto 0px;
padding: 0px auto 0px;
height:55px;
}
#navleft {
width: 700px;
float: left;
margin: 0;
padding: 0;
}
#navright {
width: 250px;
font-size: 11px;
float: right;
margin:0px;
padding:0px;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding:0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #ccc;
color: #fff;
display: block;
font-weight: bold;
text-transform: none;
padding: 15px 10px 17px 10px;
margin: 3px 5px 0 0;
}
#nav li a:hover, #nav li a:active {
background:#AA0000;
color:#000000;
padding: 15px 10px 17px 10px;
margin: 0 5px 0 0;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #AA0000;
width: 220px;
color: #FFF;
font: normal 14px "ms sans serif", verdana, arial;
text-transform: none;
float: none;
margin: 0;
padding:5px 10px;
border-bottom:1px dotted  #363636;
border-right:1px solid #363636;
border-left:1px solid #363636;
}
#nav li li a:hover, #nav li li a:active {
background: #fff;
color: #AA0000;
padding:5px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

</style>

<div id='nav'>
<div id='navleft'>
     
<ul>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>
<li><a href='ENDEREÇO LINK DO 1'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK 2'>Link 2</a></li>
</ul>
</li>

<li><a href='ENDEREÇO DO LINK 3'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO LINK 3A'>Link 3A</a></li>
<li><a href='ENDEREÇO DO LINK 3B'>Link 3B</a></li>
<li><a href='ENDEREÇO DO LINK 3C'>Link 3C</a></li>
<li><a href='ENDEREÇO DO LINK 3D'>Link 3D</a></li>
<li><a href='ENDEREÇO DO LINK 3E'>Link 3E</a></li>
<li><a href='ENDEREÇO DO LINK 3F'>Link 3F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 4'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO LINK 4A'>Link 4A</a></li>
<li><a href='ENDEREÇO DO LINK 4B'>Link 4B</a></li>
<li><a href='ENDEREÇO DO LINK 4C'>Link 4C</a></li>
<li><a href='ENDEREÇO DO LINK 4D'>Link 4D</a></li>
<li><a href='ENDEREÇO DO LINK 4E'>Link 4E</a></li>
<li><a href='ENDEREÇO DO LINK 4F'>Link 4F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 5'>Link 5</a>
<ul>
<li><a href='ENDEREÇO DO LINK 5A'>Link 5A</a></li>
<li><a href='ENDEREÇO DO LINK 5B'>Link 5B</a></li>
<li><a href='ENDEREÇO DO LINK 5C'>Link 5C</a></li>
<li><a href='ENDEREÇO DO LINK 5D'>Link 5D</a></li>
<li><a href='ENDEREÇO DO LINK 5E'>Link 5E</a></li>
<li><a href='ENDEREÇO DO LINK 5F'>Link 5F</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK 6'>Link 6</a></li>
<li><a href='ENDEREÇO DO LINK 7'>Link 7</a></li>

</ul></div>
   </div>