Buenas tardes, he creado este menu con css, y no consigo encontrar la manera de mantener el efecto hover en cada seccion, para que el usuario sepa en que seccion se encuentra.
Aqui teneis el menu para verlo: http://menuhorizontal.hostelbizkaia.com/
y el css:
Código:
*{
margin:0px;
padding:0px;
}
.MenuHorizontal {
width: 100%;
height: 60px;
text-align: center;
}
.MenuHorizontal:hover .Text {
opacity: .2;
}
.Boton {
width: 25%;
height: 60px;
float: left;
background-color:#333;
transition: all .4s;
}
#Boton1:hover {
background-image: url(../Images/Icons/home.png);
background-position: center 60px;
background-repeat: no-repeat;
}
#Boton2:hover {
background-image: url(../Images/Icons/menus.png);
background-position: center 60px;
background-repeat: no-repeat;
}
#Boton3:hover {
background-image: url(../Images/Icons/recetas.png);
background-position: center 60px;
background-repeat: no-repeat;
}
#Boton4:hover {
background-image: url(../Images/Icons/locales.png);
background-position: center 60px;
background-repeat: no-repeat;
}
.Boton:hover {
-webkit-box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
-moz-box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
box-shadow: inset 0px -5px 0px 0px rgba(250,20,39,1);
height: 120px;
}
.Boton:hover .Text{
opacity: 1;
}
.Text {
font-size: large;
transition: all .4s;
padding-top: 15px;
color: white;
}
}
Agradezco vuestra ayuda, y si a alguien le gusta el menú, pues ahi lo tiene
Saludos..