Buenas, estoy intentando hacer un menu con varios submenus que hacen una traslacion desde arriba y deseo si alguien me puede ayudar, la forma más óptima de hacerlo.
Me pierdo un poco en los submenus que heredan propiedades de las ul padres. Al querer meter 4 servicios no me caben si le doy la clase a todos los li iguales.Estoy un poco atascado con esto y no consigo meter los 4 submenus dentro .
Código HTML:
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
header, nav{
display: block;
}
header{
background:#FFFFFF;
height:60px;
position: fixed;
width: 100%;
z-index: 1000;
top:0;
}
#logo{
background: url(logo.png) no-repeat 0 0;
float: left;
margin-top: 6px;
margin-right: 0;
margin-left: 5px;
margin-bottom: 0;
width: 200px;
height: 60px;
text-indent: -9999px
}
#menu_pc{float: right;}
#menu_pc ul{
list-style: none;
font-size: 1.6rem;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu_pc li{
display: block;
float: left;
text-align: center;
font-family:FuturaStdBook;
position:relative;
}
#menu_pc li a{
color: #131313;
text-decoration: none;
height: 60px;
line-height: 80px;
padding: 0 26px;
display: block;
}
#menu_pc li a:hover{
cursor:pointer;
}
.submenu{
width: 100%;
height: 60px;
background-color: rgba(51,61,255,1.00);
position: absolute;
top: -55px;
line-height: 80px;
color: rgba(255,153,51,1.00);
z-index: 20;
}
.submenu ul{
width:100%;
}
.submenu ul li{
width: 25%;
}
#menu_pc li:hover .submenu{
-webkit-transform: translateY(55px);
-moz-transition: translateY(55px);
-ms-transition: translateY(55px);
-o-transition: translateY(55px);
transform: translateY(55px);
opacity: 1;
background-color: #FFFFFF;
}
li .submenu{
-webkit-transition:all .1s ease-out;
-moz-transition:all .1s ease-out;
-ms-transition:all .1s ease-out;
-o-transition:all .1s ease-out;
transition:all .1s ease-out;
}
</style>
</head>
<body>
<header>
<a href="#" id="logo"></a>
<nav id="menu_pc">
<ul>
<li><a href="#">Inicio</a>
<div class="submenu" id="sub1"><a href="#">Home</a></div>
</li>
<li><a href="#">Servicios</a>
<div class="submenu" id="sub2">
<ul>
<li class="subm_areas" id="cl_1"><a href="#">Servicio1</a></li>
<li class="subm_areas" id="cl_2"><a href="#">Servicio2</a></li>
<li class="subm_areas" id="cl_3"><a href="#">Servicio3</a></li>
<li class="subm_areas" id="cl_4"><a href="#">Servicio4</a></li>
</ul>
</div>
</li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
</body>