Menu responsivo, pasar de horizontal a vertical

[MindPaniC]

Bueno he conseguido ponerlo vertical, pero no consigo que cada bloque del menu se adapte al 100% del espacio, ademas tengo que darle un margen inferior a cada bloque para que no se amontonen. aqui se puede ver en funcionamiento: http://pruebas.loslocostambientienenblog.com/

Menu:

Código CSS:

#menu ul {
    margin-left:0;
    margin-top:2.12765957446809%; /* 20 / 940 */
    margin-bottom:2.12765957446809%; /* 20 / 940 */
    padding-left:0;
    padding-top:2.12765957446809%; /* 20 / 940 */
    padding-bottom:2.12765957446809%; /* 20 / 940 */
    background-color:#FAFAFA;
    border:1px solid #F2F2F2;
    color:#666666;
    float:left;
    width:100%;
    text-transform:uppercase;
}
#menu ul li { 
    display:inline;
}
#menu ul li a {
    padding:2.12765957446809%; /* 20 / 940 */
    margin-right:0;
    background-color:#FAFAFA;
    color:#666666;
    float:none;
    text-decoration:none;
}
#menu ul li a:hover {
    background-color:#7CDCD9;
    color:#FFFFFF;
}
#menu .active a {
    background-color:#7CDCD9;
    color:#FFFFFF;
}
 

MEDIA QUERY:

Código CSS:

@media screen and (max-width: 480px) {
    #menu ul li {
        display:block;
        float:none;
        margin-bottom:10px;
        list-style:none;
    }
    #menu ul li a {
    }
}
 

Cómo soluciono esas pequeñas deficiencias??

saludos