MENU COM SUBMENUS USANDO CSS NO BLOGGER

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

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>

Gostou do tutorial? Alguma duvida deixe o seu comentário!