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