Como crear un menu de CSS para un blog o una web

Vamos a desmantelar un poco nuestro blog mostrando el codigo de nuestro menu desplegable de la parte superior. El codigo es muy sencillo e intentaremos explicaros un poco como esta formado de manera que podais modificarlo a vuestro gusto y adaptarlo a vuestra web o blog facilmente; en cualquier caso, lo primero es lo primero, aqui va todo el codigo:

<!doctype 1.0>


<style>
.menu{
border:none;
border:0px;
margin:0px;
margin-top:-32px;
padding:0px;
font: 100% "Trebuchet Unicode MS", "Bitstream Vera Sans", "Lucida Sans Unicode",
"Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:Bold;
}

.menu ul{
background:#545454;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#545454 bottom right no-repeat;
color:white;
display:block;
font-weight:normal;
line-height: 35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #ff7701 bottom center no-repeat;
color:white;
text-decoration:none;
}

.menu li ul{
background:#ff7701;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:250px;
z-index:200;

/*top:1em;

/*left:0;*/

}
.menu li:hover ul{
display:block;
}

.menu li li {
background:url bottom left no-repeat;
display:block;
float:none;
margin:3px;
padding:0px;
width:252px;
}

.menu li:hover li a{
background:none;
}

.menu li ul a{
display:block;
color: #ff7701;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#545454 center left no-repeat;
border:0px;
color:white;
text-decoration:none;
}

.menu p{
clear:left;
}

</style>
<br/>
<br/>
<div class="menu">
<ul>
<li><a
href="http://bloibo.blogspot.com/">Inicio</a></li>
<li><a id="current" href="#">Lineas de codigo</a>
<ul>
<li><a href="/search/label/Ejemplos CSS">Ejemplos de CSS</a></li>
<li><a href="/search/label/Ejemplos visual basic">Ejemplos en Visual Basic</a></li>
<li><a href="/search/label/Ejemplos bases de datos">Ejemplos en Bases de datos</a></li>
<li><a href="/search/label/Ejemplos blogs">Ejemplos para Blogs</a></li>
</ul>
<li><a id="current" href="#">Programas</a>
<ul>
<li><a href="/search/label/Ofimatica software oficina">Ofimatica, software de oficina</a></li>
<li><a href="/search/label/Dibujo retoque fotografico">Dibujo y retoque fotografico</a></li>
<li><a href="/search/label/Utilidades PC">Utilidades para tu PC</a></li>
<li><a href="/search/label/Trucos">Trucos y consejos</a></li>
</ul>
</li>
</li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="/search/label/Curiosidades net">Curiosidades de internet</a></li>
<li><a href="/search/label/Noticias">Noticias del mundillo</a></li>
</ul>
</li>
<li><a href="mailto:infobloibo@gmail.com">Contactar</a></li>
<li><a href="http://www.blogger.com/home">Acceso Administrador</a></li>
</ul>
</div>
</!doctype>

Bueno como veis esto es un poco extenso, no os asusteis, el codigo esta listo para meterlo directamente en un gadget de blogger, lo ideal es ponerlo o bien debajo de la cabecera o encima como lo tenemos nosotros; bien ahora por partes:

Donde aparece:

</style>
<br/>
<br/>
<div class="menu">
<ul>
<li><a
href="http://bloibo.blogspot.com/">Inicio</a></li>
<li><a id="current" href="#">Lineas de codigo</a>
<ul>
<li><a href="/search/label/Ejemplos CSS">Ejemplos de CSS</a></li>
<li><a href="/search/label/Ejemplos visual basic">Ejemplos en Visual Basic</a></li>
<li><a href="/search/label/Ejemplos bases de datos">Ejemplos en Bases de datos</a></li>
<li><a href="/search/label/Ejemplos blogs">Ejemplos para Blogs</a></li>
</ul>
<li><a id="current" href="#">Programas</a>
<ul>
<li><a href="/search/label/Ofimatica software oficina">Ofimatica, software de oficina</a></li>
<li><a href="/search/label/Dibujo retoque fotografico">Dibujo y retoque fotografico</a></li>
<li><a href="/search/label/Utilidades PC">Utilidades para tu PC</a></li>
<li><a href="/search/label/Trucos">Trucos y consejos</a></li>
</ul>
</li>
</li>
<li><a href="#">Noticias</a>
<ul>
<li><a href="/search/label/Curiosidades net">Curiosidades de internet</a></li>
<li><a href="/search/label/Noticias">Noticias del mundillo</a></li>
</ul>
</li>
<li><a href="mailto:infobloibo@gmail.com">Contactar</a></li>
<li><a href="http://www.blogger.com/home">Acceso Administrador</a></li>
</ul>
</div>
</!doctype>

veis diferenciado los links en "href" y el texto que se muetra: ">Acceso Administrador</a><
esto solo es lo que tendreis que cambiar para adaptarlo a vuestras necesidades, si os fijais podreis diferenciar los links especiales a los que estan dentro del menu; bueno pues si os sobran o os faltan solo tendreis que copiar pegar.

Los colores y fondos y colores de texto vendran identificados de las siguientes maneras:

background:#545454
color:white;

Solo tendreis que cambiarlos y ponerlo a vuestro gusto; para saber los codigos de color como #545454 podreis visitar la siguiente pagina [link]

Poco mas que añadir, a los que utiliceis el codigo para un blog deciros que si lo poneis en un gadget no tendreis muchos problemas ya que no afectara a la estructura de la pagina y no se os estropeara nada; asi que trabajar en el codigo sin miedo.

Un saludo.