menu con submenus

duplest10 · #1 (**permalink**) 21/04/2014, 10:26

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>

siddartha23 · #2 (**permalink**) 21/04/2014, 10:51

En tu css dice: #menu_pc li {...estilos...} esos estilos le aplican a todos los li que tienes en tu nav sin importar que tan "adentro" estén, prueba haciendo algo como esto: #menu_pc li.btn {...estilos...} y ponle la clase btn a tus 5 botones principales

duplest10 · #3 (**permalink**) 21/04/2014, 11:53

Gracias por tu respuesta...

El problema que no consigo resolver aunque le ponga a un botón la clase btn y le doy estilo a los "a" y le doy padding y demás, todos los "a" dentro de esa clase me hereda los padding. No soy capaz y estoy bloqueado con este tema, algo que pensaría que no me traería problema...

No sé donde está el error..

Gracias de nuevo

siddartha23 · #4 (**permalink**) 21/04/2014, 12:07

Cuando usas selectores de css tienes que tratar de ser mas específico, por ejemplo a cada .btn ahora le podrías dar un id distinto y por css darle estilos, por ejmplo, solo al link que esta dentro del id=servicios (#servicios a{...}), o al primer link que esta dentro de servicios (#servicios a:first-child{...}), o solo al segundo (#servicios a:nth-child(2){...}) y así...

pzin · #5 (**permalink**) 21/04/2014, 13:46

Para evitar tener un selector demasiado amplio y afectar a los hijos, puedes usar el selector >, así no se verán afectados todos los elemntos descendientes sino solamente los hijos.