Menú dos niveles

Presenta arriba los "títulos de crédito", el contenido del blog y debajo los "subtítulos (puede verse en "Clásica").

Lo mismo que un drop down menú, pero sin andar mareada como un pato entre despliegues y repliegues.

Bueno, pues es de dynamicdrive
Y tiene dos piezas de código, para incluir con la plantilla expandida:

CSS (colocad antes del cierre de "skin")

<style type="text/css"><br /><br />/*Credits: Dynamic Drive CSS Library */<br />/*URL: http://www.dynamicdrive.com/style/ */<br /><br />#maintab{<br />padding: 3px 0;<br />margin-left: 0;<br />margin-bottom: 0;<br />font: bold 12px Verdana;<br />list-style-type: none;<br />}<br /><br />#maintab li{<br />display: inline;<br />margin: 0;<br />}<br /><br />#maintab li a{<br />text-decoration: none;<br />padding: 3px 7px;<br />margin-right: 3px;<br />border: 1px solid #778;<br />color: black;<br />background: white;<br />}<br /><br />#maintab li a:hover{<br />color: navy;<br />background: #EFFADC;<br />}<br /><br />#maintab li.selected a{ /*selected main tab style */<br />background-color: #EFFADC;<br />border-color: navy;<br />}<br /><br />#tabcontent{ /*2nd level content wrapper*/<br />border: 1px solid #778;<br />background-color: #EFFADC;<br />height: 100% /*IE7 beta2 fix*/<br />}<br /><br />#tabcontent ul{<br />padding: 0;<br />margin: 0;<br />list-style-type: none;<br />display: none;<br />}<br /><br />#tabcontent ul li{<br />display: inline;<br />}<br /><br />#tabcontent ul.selected{ /*selected 2nd level content*/<br />display: block;<br />}<br /><br />#tabcontent ul li a{<br />border-right: 1px solid #778;<br />color: navy;<br />padding: 2px 5px;<br />display: block;<br />float: left;<br />text-decoration: none;<br />}<br /><br /><br />#tabcontent ul li a:hover{<br />background-color: #D3F1A0;<br />color: blue;<br />}<br /><br />.clearfix:after{ /*Clear floats hack: http://positioniseverything.net/easyclearing.html*/<br />content: "."; <br />display: block; <br />height: 0; <br />clear: both; <br />visibility: hidden;<br />}<br /><br />.clearfix{<br />display: inline-table;<br />}<br /><br />/* Hides from IE-mac \*/<br />* html .clearfix {height: 1%;}<br />.clearfix {display: block;}<br />/* End hide from IE-mac */<br /><br /><br /></style><br /><br />

HTML (colocad en el "body". Yo lo inserté justo antes del "div id="content-wrapper")

<ul id="maintab"><br /><li><a href="http://www.dynamicdrive.com">Home</a></li><br /><li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li><br /><li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li><br /><li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li><br /><li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li><br /></ul><br /><br /><div id="tabcontent" class="clearfix"><br /><br /><!--Sub Content #1 --><br /><ul><br /><li><a href="http://www.dynamicdrive.com">Home</a></li><br /><li><a href="http://www.dynamicdrive.com/new.htm">New</a></li><br /><li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li><br /></ul><br /><br /><!--Sub Content #2 --><br /><ul class="selected"><br /><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li><br /><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li><br /><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li><br /><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li><br /></ul><br /><br /></div><br /><br />

Se me olvidaba: lo "complicado" no es insertar los códigos, sino... andar de atrás para alante insertando ls URL de cada "item y subitem". Probad primero a hacer una prueba en un blog nuevecito y sin muchos perejiles e id echando un ojo a "vista previa" cada vez que introduzcáis un item nuevo-así os podéis ir dando cuenta de si todo va bien o en el último habéis metido la pata.

Y si tenéis más elementos de item o subitems para incluir, de los que alcanza el código HTML, no pasa nada: simplemente se abrirá en vuestra pantalla otra franja. Así que ¡a ello!.