Aparecer div al presionar una opcion del menu

angelrojinegro · #1 (**permalink**) 06/02/2012, 13:20

Buenas tardes, agradecería mucho si me pudieran ayudar, lo que pasa es que tengo un menú y necesito que al presionarlo aparezca en la parte inferior del menu un div del color de la opción en el que pueda agregar contenido, y si pudiera ser en su totaldad con css, aqui esta el codigo

Codigo HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" href="estilo2.css" type="text/css" />

</head>
<body>
<div id="menu">
<ul>
  <li class="nivel1" tabindex="1"><span class="green">INICIO</span></li>
  <li class="nivel1" tabindex="2"><span class="yellow">NOSOTROS</span></li>
  <li class="nivel1" tabindex="3"><span class="red">PRODUCTOS</span></li>
  <li class="nivel1" tabindex="4"><span class="blue">SERVICIOS</span></li>
  <li class="nivel1" tabindex="5"><span class="purple">CONTACTO</span></li>
  <li class="nivel1" tabindex="5"><span class="yellow">PREMIOS</span></li>
  <li class="nivel1" tabindex="5"><span class="green">CONTACTO</span></li>
</ul>
</div>
</body>
</html>

Codigo CSS

Código:

@charset "utf-8";
/* CSS Document */

* { margin: 0px;
padding: 0px; outline: 0;
}

#menu {  
text-align: center; /*alinear texto*/
font-size: 15px; /*tamaño de letra*/
font-weight: bold;
width: 843px; /*Tamaño del div*/
height: 50PX;
margin: 10px auto; /*margen*/
position: relative; /*posicion*/
margin-left: 300px;
}
#menu ul { list-style-type: none;}/*quitar adorno*/

#menu ul li.nivel1 { 
    float: left;
    width:120px;
	height:50px;
	text-align:center;
	font-size:12px;
}

#menu ul li { float: left;}/*acomodar horizontal submenu*/

.green {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color: #093; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

.yellow {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color:  #FC0; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

.red {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color: #D52100; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

.purple {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color: #5122B4; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

.blue {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color: #0292C0; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

.blue {display: block;
text-decoration: none; /*quitar subrayado*/
color: #fff; /*Color letrea menu*/
background-color: #0292C0; /*color fondo*/
padding: 15px; /*alinear vertical*/
}

/*#menu ul li span.nivel1 {
	display: block;
}*/

#menu ul li:hover span.nivel1 {
	cursor: pointer; /*Aparecer manita al pasar en caja*/
}

#menu ul li ul {
	display: none; /*ocultar submenu*/
}


#menu ul li ul li a {
width: 160px; /*ancho caja submenu*/
padding: 6px 9px 8px 0px; /*centrar texto en la caja del ssubmenu*/
background-color:  #06C; /*Fondo submenu*/
}

#menu ul li ul li a:hover {
text-decoration: none; /*Quitar sub*/
color:  #CCC; /*color sobre link*/
}

ul.uno {left: -0px;} /*acomodo de los submenu*/
ul.dos {left: -164px;}
ul.tres {left: -328px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}

#menu ul li:focus ul, #menu ul li:active ul {
	display: block; /*mostar submenu*/
    position: absolute; /*mostar toda linea submenu*/
	width: 818px; /*ancho submenu*/
	none;background-color: #06C; /*color div submenu*/
}
#menu ul li:focus span, #menu ul li:active span {
	border-bottom: solid 1px #06C; /*Union menu con submenu*/
	color: #fff; /*color letra caja activa*/
}

Agradezco enormemente su ayuda, el codigo css tiene algo de codigo inutil porque me base en un menu que tenia hecho pero no se bien que sobra y que falta
Saludos

comablck · #2 (**permalink**) 06/02/2012, 19:34

para eso tendrias q usar alguna funciòn javascript q te ejecute el click para mostrar el div q estaria oculto

kseso? · #3 (**permalink**) 07/02/2012, 04:53

Cita:

Iniciado por comablck:4112278

para eso tendrias q usar alguna funciòn javascript q te ejecute el click para mostrar el div q estaria oculto

Con todo el respeto que esa afirmación me merece, ?qué fue de todos los selectores con pseudoclases y pseudoelementos?
Cosas como :hover, :focus, :active... o los más "nuevos" como :checked?
No digo que no sea conveniente su uso (de js) en según qué casos. Pero obligado o imprescindible, no.

Angel
Con esos códigos, que creo que es una realización de un tercero ya bastante alterada a peor, no se puede dar una respuesta concreta.
Por ejemplo, habla de un div que debe aparecer, pero no aparece en su html. Tampoco queda claro si está realizando un menú desplegable o son tabs (navegación por pestañas), etc.