Aqui teneis el menu para verlo: http://menuhorizontal.hostelbizkaia.com/
y el css:
Código:
Agradezco vuestra ayuda, y si a alguien le gusta el menú, pues ahi lo tiene *{ 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; } }
Saludos..