Que tengo que añadir a mi css para que en la barra de navegacion del header el submenu "details" de "galeria" se muestre oculto y se despliegue al pasar el ratón por encima?
Gracias.
Código :
<header id="navigation" class="navbar-inverse navbar-fixed-top animated-header"> <div class="container"> <div class="navbar-header"> <!-- responsive nav button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- /responsive nav button --> <!-- logo --> <img src="img/logo.png" height="75"> <!-- /logo --> </div> <!-- main nav --> <nav class="collapse navbar-collapse navbar-right" role="navigation"> <ul class="nav navbar-nav"> <li><a href="index.html">Inicio</a></li> <li><a href="galeria.html">Galería</a></li> <ul><li><a href="details.html">Details</a></li></ul> <li><a href="prensa.html">Prensa</a></li> <li><a href="sobre.html">Sobre Nosotros</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </nav> <!-- /main nav --> </div> </header>
Código :
/**
/* Header
/* ==========================================*/
#navigation {
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
background-color: rgba(0,0,0,.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
padding: 5px 0;
}
#navigation.animated-header {
padding: 20px 0;
}
h1.navbar-brand {
font-size: 20px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}
.navbar-inverse .navbar-nav > li > a {
color: #E7AE18;
font-size: 15px;
text-transform: uppercase;
}
