MENÚ VERTICAL CON EFECTO DE COLOR

Menú vertical con efecto de color que baja hasta el cuadro seleccionado, esta diseñado para ocho  si se pone menos había que modificar en tanto por ciento en( height: 12.5%; ) y aplicarle el porcentaje que correspondiera dependiendo de las casillas al igual que en la parte de abajo de codido.

 .marca {top: 0%;}
 .marca {top: 12.5%%;}

"#" Aquí pondríamos la URL entre las comillas.

Se añadiría con un gadget-html-javascript-

CÓDIGO

 <div class="menudes">

< a href="#">Inicio</a>
< a href="#">Pintura</a>
< a href="#">Escultura</a>
< a href="#">Grabados</a>
< a href="#">Música</a>
< a href="#">Danza</a>
< a href="#">Acerca de</a>
< a href="#">Contacto</a>
< div class="marca"></div>
< /div>
< style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #000;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menudes a:hover {color: #000;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
< /style>