Hola, llevo varios días probando a crear un menú con divs que aparecen y se ocultan. Sin tener ninguna idea de javascript me he ido apañando con comentarios en este foro y todo internet. Aún con problemas, he encontrado este ejemplo:


Código :

<html>
<head>
   <style type="text/css">
      #links{margin: 0 auto;}
         .lvl1{ float: left;}
      #sublinks{margin: 0 auto;}
         .lvl2{float: left;}
      #subsublinks{margin: 0 auto;}
         .lvl3{float: left;}
         
      div.lvl1:hover{color:#060; background:#0CF}
      div.lvl1:active{color:#F00}
      div.lvl2:hover{color: #00F}
      
         
   </style>
    
    <script language="javascript">
   var last = '1';
       function op(section) {
         var ite = document.getElementById(section);
         var ite = document.getElementById(section);
         
         if (last != '1') {
            var div = document.getElementById(last);
            div.style.display = 'none';
               
         }
   
         last = section;
         
         if (ite.style.display == 'block') {
             ite.style.display = 'none';
         } else if (ite.style.display) {
            ite.style.display = 'block';
         }
         
      }
    </script>
    
</head>
<body>

<div id="links">
 <div class="lvl1" onClick="op('link1')">&nbsp; Link1 &nbsp;</div>
 <div class="lvl1" onClick="op('link2')">&nbsp; Link2 &nbsp;</div>
 <div class="lvl1" onClick="op('link3')">&nbsp; Link3 &nbsp;</div> &nbsp;
</div>

<div id="sublinks">

   <div id="link1" style="display:none;">
      <div class="lvl2">Link 1 &nbsp;&nbsp;</div>
        <div class="lvl2">link 1 &nbsp;&nbsp;</div>
        <div class="lvl2" onClick="op('link4')">prueba &nbsp;&nbsp;</div> &nbsp;
   </div>
    
    <div id="link2" style="display:none;">
       <div class="lvl2">link 2 &nbsp;&nbsp;</div>
        <div class="lvl2">link 2 &nbsp;&nbsp;</div>
        <div class="lvl2">link 2  &nbsp;&nbsp;</div>
    </div>
    
    <div id="link3" style="display:none;">
       <div class="lvl2">link 3 &nbsp;&nbsp;</div>
          <div class="lvl2">link 3 &nbsp;&nbsp;</div>
        <div class="lvl2">link 3 &nbsp;&nbsp;</div>
    </div>
</div>


<div id="subsublinks">

    <div id="link4" style="display:none;">
       <div class="lvl3">&nbsp; link4 &nbsp;</div>
        <div class="lvl3">&nbsp; link4 &nbsp;</div>
        <div class="lvl3">&nbsp; link4 &nbsp;</div>
   </div>
    
</div>


</body>
</html>


Originalmente el código solo contaba con dos niveles "links" y "sublinks", pero como en la página necesito que haya un tercer nivel de información he añadido "subsublinks".
Mi duda es como mantener visible el segundo nivel (lvl2) de links "sublinks" cuando despliego el tercer nivel (lvl3) de "subsublinks".


Muchas gracias por vuestra ayuda.