Menu a Tendina per Blogger CSS

Per inserire un menu a tendina su blogger:
Prima di tutto salvare il proprio codice HTML come copia di sicurezza. Successivamente andare su MODELLO > PERSONALIZZA > AVANZATO > ADD CSS e inserire il seguente codice:

 #mbtnavbar { background: #dbdbdb; width: 900px; color: #000; margin: 0px; padding: 0; position: relative; border-top:0px solid #F29B3E; height:37px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; border-left:0px solid #F29B3E; border-right:0px solid #F29B3E; height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #000000; display: block; font:bold 12px Arial; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #F29B3E; color: #fff; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 130px; margin: 0; padding: 0; } #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #dbdbdb; width: 120px; color: #000; display: block; font:bold 10px Arial, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbtnav li li a:hover, #mbtnavli li a:active { background: #F29B3E; color: #fff; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } 


Cliccare su "Applica al Blog".
 Adesso andare su LAYOUT e inserire un nuovo "elemento pagina" (codice HTML) incollando il seguente codice:









Inserite al posto di # l'indirizzo desiderato ed il gioco è fatto.


Nessun commento: