menú vertical - efectos y posicion

[difilippocarlos]

Código:

@media (min-width:1200px){
    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; -webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 130px;}

    #navIzquierda{visibility: visible;}
    #navDerecha{visibility: visible;}
    #navInferior{visibility: hidden;}

    .menu #navIzquierda li a#i01{background: url('../img/SpriteWebNormal.png') no-repeat -407px -351px; float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i03{background: url('../img/SpriteWebNormal.png') no-repeat -406px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i04{background: url('../img/SpriteWebNormal.png') no-repeat -508px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i04:hover{background: url('../img/SpriteWebNormal.png') no-repeat -508px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i05{background: url('../img/SpriteWebNormal.png') no-repeat -0px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i05:hover{background: url('../img/SpriteWebNormal.png') no-repeat 0 -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

    .menu #navDerecha li a#d01{background: url('../img/SpriteWebNormal.png') no-repeat -102px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d03{background: url('../img/SpriteWebNormal.png') no-repeat -510px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -508px -255px;float:left;width: 65px;height: 65px;text-indent:1em;}
    .menu #navDerecha li a#d04{background: url('../img/SpriteWebNormal.png') no-repeat -102px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d04:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d05{background: url('../img/SpriteWebNormal.png') no-repeat -305px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d05:hover{background: url('../img/SpriteWebNormal.png') no-repeat -305px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

    .menu #navIzquierda li:first-child{padding-left: 25px;}
    .menu #navIzquierda li{padding-right: 25px;}
    .menu #navDerecha li:last-child{padding-right: 25px;}
    .menu #navDerecha li{padding-left: 25px;}

    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navIzquierda{text-align: left;margin-top: 50px;float:left;}
    #navDerecha{margin: 50px auto;float:right;}
}

div#tiempo_ampliado {position: absolute;top: 132px;right: 0;display: none;z-index: 100;}
.menu #navDerecha li a#d03:hover div#tiempo_ampliado {display: block;}
div#tiempo_ampliado{font-family: 'muli'; color: #fff;}
div#tiempo_ampliado table{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; border: 2px solid #143C5C;}
div#tiempo_ampliado table{ background-color: #2A7EC2; max-width: 450px;}
div#tiempo_ampliado th{font-size: 1.2em; padding-left: 0.5em;}
div#tiempo_ampliado #fecha{font-size: 1.3em; padding-left: 0.5em; padding-right: 1em;}
div#tiempo_ampliado #max,div#tiempo_ampliado #min{padding: 0.5em 0.5em 0.1em 0.5em; vertical-align: bottom; font-size: 1.1em;}
div#tiempo_ampliado td#imagen{height: 80px; text-align: center; vertical-align: middle; padding-left: 1em; padding-right: 2em;}
div#tiempo_ampliado td#imagen img{width: 120px;}
div#tiempo_ampliado .max,div#tiempo_ampliado .min{padding: 0 0.5em 0.5em 0.5em; vertical-align: top; font-size: 1.1em;}
div#tiempo_ampliado td#desc_temp{font-size: 1.4em; padding-right: 0.2em; text-align: right;}

div#fondo-vmenu{position: fixed;top:0;height: 100%;background: #143C5C; width: 300px; z-index: -1000;}
div.container{width: 82%; float: left;}
nav#vertical-menu{width: 300px; float: left; height: 100%;}
nav#vertical-menu h3{font-family: 'bebas'; color: #FFF;font-size: 1.5em; letter-spacing: 5px; margin-left: 15px;padding: 0.4em; margin-top: 1em;}
nav#vertical-menu a {font-family: 'muli';display: block;color: #fff;font-size: 1.2em; margin-left: 15px;padding: 0.4em;}
nav#vertical-menu a:hover{background: #2A7EC2; text-indent: 1em; font-size: 1.2em; font-weight: bold;}

@media (max-width:1800px){
    div.container{width: 80%;}
}

@media (max-width:1520px){
    div.container{width: 78%;}
}

@media (max-width:1380px){
    div.container{width: 76%;}
}
@media (max-width:1300px){
    div.container{width: 76%;}
    div#fondo-vmenu{width: 250px;} 
    nav#vertical-menu{width: 250px; float: left; height: 100%;}
    nav#vertical-menu h3{font-size: 1.4em; letter-spacing: 4px; margin-left: 15px;padding: 0.3em; margin-top: 1em;}
    nav#vertical-menu a {font-size: 1em; margin-left: 10px;padding: 0.3em;}
    nav#vertical-menu a:hover{font-size: 1em;}
}
@media (max-width:1100px){
    div.container{width: 76%;}
    div#fondo-vmenu{width: 200px;} 
    nav#vertical-menu{width: 200px; float: left; height: 100%;}
    nav#vertical-menu h3{font-size: 1.2em; letter-spacing: 4px; margin-left: 15px;padding: 0.2em; margin-top: 1em;}
    nav#vertical-menu a {font-size: 1em; margin-left: 10px;padding: 0.2em;}
    nav#vertical-menu a:hover{font-size: 1em;}
}

@media (max-width:850px){
    div.container{width: 72%;}
}
@media (max-width:750px){
    div#fondo-vmenu{visibility: hidden; height: 0; width: 0;}
    nav#vertical-menu{visibility: hidden; height: 0; width: 0;}
    div.container{width: 98%;}
}