elementos que se abren en varios sub elementos

hola, como estan?, espero que bien...
me ha surgido una duda que no se muy bien como expresar. haber si alguien me entiende.
quiero poner en mi pagina web algo parecido a esta:

-codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<h1>Este es un título de importancia Uno</h1>
<h2>Este es un título de importancia Dos</h2>

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">Barra de Navegación</div>
<div
id="contenido">
<div id=menu>menu
<ul>
  • Elemento 1
  • Elemento 2
  • Elemento 3
    </div>


    Esta será la zona principal de la web</p>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues
    no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>


    Y este es el tercer párrafo. En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a
    la izquierda, o justificados. Así esto parece una poesia! je je je.</p>

    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>

    </html>

    estilo:
    * {margin:0px ; padding:0px ; border: 0px}
    a {color: blue; font-size:1.3em ; text-decoration: none; display:block }
    a:link {}
    a:visted {}
    a:hover {color:green ; text-decoration: underline}
    a:active {}
    body {text-align: center}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    p {text-align: justify}
    #contenido p {padding: 5px 10px 5px 10px;text-indent: 15px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #global {width:800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ;
    height: 12px ; overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #navegacion {background-color: gray ; border: black 1px solid }
    #menu {background-color: yellow; width: 150px ; float:left; text-align:left; margin-right: 10px;margin:10px 10px 10px 10px }
    #menu li { list-style: none; margin: 4px 0px 4px 6px }
    #contenido {background-color: orange ; width:auto ;
    border-left: black 1px solid ; border-right: black 1px solid}
    #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ;
    height: 12px ; overflow: hidden }

    pero con el objetivo que una ves que alguien cliquee en la frase menu se abran recien ahi los elementos 1, 2 y 3 y no que queden permanentemente ahi. si alguien me podria ayudar seria muy util.

    desde ya muchas gracias ^^
  • muchas gracias man voy a ver como lo puedo aprovechar... xq son imagenes als que quiero abrir haber si se puede!


    che no puedo hacer que de la imagen seleccionada baje una lista con otros links.... alguien me peude dar unas manitos?

    ahora cuando vuelva a la mi pc les dejo el codigo asi lo chekean y talves alguno sepa que se puede hacer para que queda algo parecido y poder lograr ese efecto que sinceramente no entendi mucho con el ejemplo