.menu{
    padding:0;
    list-style:none;
    width:200px;
    font-size:18px;
    background:#c1c1c1;
    border: 1px solid rgba(0,0,0,0.8);
}
 
.menu li a{
    display: block;
    border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#3e3f44;
    text-decoration:none;
    color:#FFF;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
    padding:10px;
    padding-left:20px;
}
 
.menu li ul li a{
    font-size:14px;
    color:#47689d;
    text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
     
}
 
.menu li a:hover{
    background:#4a6ba2;
    -moz-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
}
 
.menu ul{
    margin:0;
    padding:0;
    list-style:none;
    height:0;
    overflow: hidden;
    transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;
}
 
.menu li:hover ul{
    height:170px;
    overflow-y:auto;
    overflow-x:hidden;
}
 
.menu ul li a{
    background:#fafafa;
}
 
.menu ul li a:hover {
    background: none repeat scroll 0 0 #ccc;
    color: #fff;
    -moz-transition: color 0.4s ease;
    -webkit-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
}

#container {
width: 600px;
height: auto;
margin: 0px auto;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 30px;
box-shadow: 10px 10px 10px #6969bc;

}

#menuPrincipal h1 {
    
    width: 500px;
}

#menu0 {
height: auto;
width: 500px;
margin: 0px auto;
padding-top: 0px;
padding-left: 10px;
padding-bottom: 30px;
box-shadow: 10px 10px 10px #6969bc;

}

#cabecera {
    background: url("http://estaticos02.elmundo.es/elmundo/iconos/v4.x/v4.01/bg_h1_cancer.png") no-repeat scroll left top transparent;
    width: 500px;
    margin: 0px auto;
    height: 65px;
    top: 4px;
    padding-bottom: 6px;
}

#container h1 {

    text-shadow: 3px 5px 1px #9669bd;
}


footer{
    background-color: silver;
    padding-bottom: 0px;
    text-align: center;
}

footer a {color: white;}

footer a:hover{

    color: red;
    font-weight: bold;
    padding-bottom: 120px;
}

#contenido {

    width: 400px;
}
#contenido h1 {

    width: 400px;
    height: 95px;
   
} 

#main {

    background-color: silver; 
    font-family: verdana;
    font-size: 10px;
    width:270px; 
    float: right;
    position: absolute; 
    top: 80px;
    margin-left: 208px; 
    padding: 9px; 
}


.modulo .fila .noticia{width:190px;float:left;margin-right:15px;clear:none;}
.modulo .fila .noticia h3{font-size:18px;font-weight:normal;}
.modulo .fila .noticia h4, 
.fila_relacionadas h4{font-size:14px;font-weight:bold;padding:0;margin:0 0 9px;}












- See more at: http://www.tutosytips.com/creacion-de-un-menu-tipo-acordeon-solo-con-css3/#sthash.9TSzcE1T.dpuf