Código:
y en este otro trozo de código (sin css porque es el mismo que arriba) os pongo como se tendría que ver con las capas plegadas u ocultas o como se haga....me han dicho que se hace con javascript...pero en eso estoy muy flojo a ver si me podeis dar alguna pista de como hacerlo<!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=iso-8859-1" /> <title>Documento sin título</title> <style type="text/css"> body { color:#262626; font-family:Arial,Helvetica,Sans-serif; font-size:1em; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; text-align:center; } a { color:#262626; text-decoration:none; } .clearboth{ clear:both; } h1{ color:#013365; font-size:1.2em; margin:0.2em 0.5em; padding:0; } h2{ color:#013365; font-size:1em; margin:0; padding:0; } #menu_general{ padding:0; margin:0 auto; text-align:left; width:982px; /*border:1px solid black;*/ } #menu_general ul{ list-style-type: none; margin:0; padding:0; /*border:1px solid black; float:left; width:100%;*/ } #contenedor_listas{ background:url("fondo_menu1.png") no-repeat scroll center top transparent; height:108px; width:978px; } #capa_puerto_de_culturas{ font-size:0.8em; } #capa_puerto_de_culturas ul { display:block; height:4.5em; list-style-type:none; margin-left:2em; padding:0.9em 0.7em 0 0; } #capa_puerto_de_culturas ul li { float:left; margin-left:0.2em; margin-right:5em; padding-bottom:0.45em; padding-left:1.5em; width:16.9em; background-image: url(flecha_listados.png); background-repeat: no-repeat; background-position:0.5em 25%; } #capa_conocenos{ font-size:0.8em; } #capa_conocenos ul{ display:block; height:4.5em; list-style-type:none; margin-left:2em; padding:1.4em 0.7em 0 0; } #capa_conocenos ul li{ float:left; margin-left:0.2em; margin-right:5em; padding-bottom:0.45em; padding-left:1.5em; width:16.9em; background-image: url(flecha_listados.png); background-repeat: no-repeat; background-position:0.5em 25%; } #capa_rutas_actividades{ font-size:0.8em; } #capa_rutas_actividades ul{ display:block; height:4.5em; list-style-type:none; margin-left:2em; padding:1.4em 0.7em 0 0; } #capa_rutas_actividades ul li{ float:left; margin-left:0.2em; margin-right:5em; padding-bottom:0.45em; padding-left:1.5em; width:16.9em; background-image: url(flecha_listados.png); background-repeat: no-repeat; background-position:0.5em 25%; } #sub_menu_rutas_actividades{ display:block; height:4.5em; list-style-type:none; margin-left:2em; padding:0.2em 0 0 0; } #capa_y_tambien{ font-size:0.8em; } #capa_y_tambien ul{ display:block; height:4.5em; list-style-type:none; margin-left:2em; padding:1.4em 0.7em 0 0; } #capa_y_tambien ul li{ float:left; margin-left:0.2em; margin-right:5em; padding-bottom:0.45em; padding-left:1.5em; width:16.9em; background-image: url(flecha_listados.png); background-repeat: no-repeat; background-position:0.5em 25%; } #navlist{ list-style-type: none; padding:5px; margin:0 auto; } #navlist li{ display: block; } #subnavlist{ list-style-type: none; padding:0; margin:5px 25px; } #subnavlist li{ display: inline; } .menu_puerto_de_culturas{ float:left; } .menu_conocenos{ float:left; } .menu_rutas_actividades{ float:left; } .menu_y_tambien{ float:left; } </style> </head> <body> <div id="menu_general"> <ul> <li class="menu_puerto_de_culturas"><a href="#"> <h1>Menu1</h1> </a> <div id="contenedor_listas"> <div id="capa_puerto_de_culturas"> <ul> <li><a href=""> Item 1 </a></li> <li><a href=""> Item 2</a> </li> <li><a href=""> Item 3</a> </li> <li><a href=""> Item 4</a></li> <li><a href=""> Item 5</a></li> <li><a href=""> Item 6</a></li> <li><a href=""> Item 7</a></li> <li><a href=""> Item 8</a></li> <li><a href=""> Item 9</a></li> <li><a href=""> Item 10</a></li> <li><a href="">Item 11</a></li> </ul> </div> </div> </li> <li class="menu_conocenos"><a href="#"> <h1>Menu2</h1> </a> <div id="contenedor_listas"> <div id="capa_conocenos"> <ul> <li><a href=""> Item 1</a></li> <li><a href="#"> Item 2</a></li> <li><a href="#"> Item 3</a></li> <li><a href="#"> Item 4 </a></li> <li><a href="#"> Item 5</a></li> <li><a href="#"> Item 6</a></li> <li><a href="#"> Item 7</a></li> <li><a href="#"> Item 8</a></li> <li><a href="#"> Item 9</a></li> </ul> </div> </div> </li> <li class="menu_rutas_actividades"><a href="#"> <h1>Menu3</h1> </a> <div id="contenedor_listas"> <div id="capa_rutas_actividades"> <ul> <li><a href="#"> Item 1</a></li> <li><a href="#"> Item 2</a></li> <li><a href="#"> Item 3</a></li> <li><a href="#"> Item 4</a></li> <li><a href="#"> Item 5</a></li> <li><a href="#"> Item 6</a></li> </ul> </div> </div> </li> <li class="menu_y_tambien"><a href="#"> <h1>Menu4</h1> </a> <div id="contenedor_listas"> <div id="capa_y_tambien"> <ul> <li><a href="#"> Item 1</a></li> <li><a href="#"> Item 2</a></li> <li><a href="#"> Item 3</a></li> <li><a href="#"> Item 4</a></li> <li><a href="#"> Item 5</a></li> <li><a href="#"> Item 6</a></li> <li><a href="#"> Item 7</a></li> </ul> </div> </div> </li> </ul> <div class="clearboth"></div> </div> </body> </html>
Código:
Bueno lo dicho a ver si me podeis ayudar.<!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=iso-8859-1" /> <title>Documento sin título</title> </head> <body> <div id="menu_general"> <ul> <li class="menu_puerto_de_culturas"><a href="#"><h1>Menu1</h1></a></li> <li class="menu_conocenos"><a href="#"> <h1>Menu2</h1> </a></li> <li class="menu_rutas_actividades"><a href="#"> <h1>Menu3</h1> </a></li> <li class="menu_y_tambien"><a href="#"> <h1>Menu4</h1> </a></li> <div id="contenedor_listas"> <div id="capa_puerto_de_culturas"> <ul> <li><a href=""> Item 1 </a></li> <li><a href=""> Item 2</a> </li> <li><a href=""> Item 3</a> </li> <li><a href=""> Item 4</a></li> <li><a href=""> Item 5</a></li> <li><a href=""> Item 6</a></li> <li><a href=""> Item 7</a></li> <li><a href=""> Item 8</a></li> <li><a href=""> Item 9</a></li> <li><a href=""> Item 10</a></li> <li><a href="">Item 11</a></li> </ul> </div> </div> </li> </ul> <div class="clearboth"></div> </div> </body> </html>
Un saludo