Cambio IX

Previos:
Cambio I, Cambio II, Cambio III, Cambio IV, Cambio V, Cambio VI, Cambio VII, Cambio IX.
Continuemos con la remodelación del Blog, continuemos con el menú, hay en la Web varis paginas que nos ayudan a genera menús con estilos CSS, aquí listo varios ejemplos de ellos, a los cuales le tenemos que proporcionar algunos parámetros y con ello obtenemos un código que podemos adaptar a lo que deseamos hacer, algunos de ellos son:

CSS Menu Generator :: Webmaster Toolkit
Free Menu Designs - e-lusion.com
Dashed Vertical Menu
JK Cool CSS Menu
CSS Drive vertical menu links
css.maxdesign.com.au

Para el menú del Blog aplicaremos un efecto simple un marco con esquinas redondeadas en color azul, el código lo obtuvimos de este ejemplo caja con esquina redondeada.

Agregamos el siguiente código a nuestro CSS:

h1,h2,p{
margin: 10px
}

p{
padding-bottom:1em
}

div#nifty{
width: 95%;
color: #ffffff;
margin: 0 ;
background: #154164
}

div#nifty a{
color: #ffffff;
}

div#nifty a:hover{
color: Gray;
font: bold;
}

b.rtop, b.rbottom{
display:block;
background: #FFF
}

b.rtop b, b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #154164
}

b.r1{
margin: 0 5px
}

b.r2{
margin: 0 3px
}

b.r3{
margin: 0 2px
}

b.rtop b.r4, b.rbottom b.r4{
margin: 0 1px;
height: 2px
}

y el código en cada una de las secciones del menús seria así:

<div id="nifty">
< b class="rtop"><b class="r1"></b><b class="r2"></b><b
class="r3"></b><b class="r4"></b></b>

[Aquí el sección]

<b class="rbottom"><b class="r4"></b><b
class="r3"></b><b class="r2"></b><b
class="r1"></b></b></div>

Así quedaría después de las modificaciones.

Saludos.