Menu desplegable con Scriptaculous

Este es un menú desplegable creado por Sven Wappler que requiere del uso de las librerías Prototype + Scriptaculous.

Una vez que tenemos descargado el script , lo alojamos en un servidor o lo insertamos en la plantilla antes de </head>:

<script src="URL_menu.js" type="text/javascript"></script>

• Menu 1 (+)
  • Submenu 1.1.
  • Submenu 1.2. (+)
    • Submenu 1.2.1.
    • Submenu 1.2.2.
    • Submenu 1.2.3.
  • Submenu 1.3.
  • Submenu 1.4. (+)
    • Submenu 1.4.1.
    • Submenu 1.4.2.
    • Submenu 1.4.3.
    • Submenu 1.4.4.
• Menu 2
• Menu 3
• Menu 4 (+)
  • Submenu 4.1.
  • Submenu 4.2. (+)
    • Submenu 4.2.1.
    • Submenu 4.2.2.
    • Submenu 4.2.3.
  • Submenu 4.3.
• Menu 5

El CSS elemental también podemos descargarlo y, como siempre, lo mejor es copiar su contenido y agregarlo a la plantilla, ya sea dentro de <b:skin> </b:skin> o entre etiquetas <style> </style> para poder editarlo y adaptarlo a nuestro sitio:

#menu { /* es el bloque contenedor del menú */
  background: #678;
  border-bottom: 1px solid #ABC;
  border-top: 1px solid #ABC;
  padding-left: 10px;
  height: 32px;
  width: 100%;
}
#menu  ul { /* las listas */
  display: block;
  line-height: 1em;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 90
}
#menu  ul li { /* los items de las listas */
  float: left;
  font-size: 12px;
  line-height: 1, 5em;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu ul li a { /* los enlaces de las listas */
  background: transparent;
  color: GreenYellow;
  display: block;
  font-weight: bold;
  line-height: 32px;
  text-decoration: none;
  margin: 0;
  padding: 0 1em;
  width: auto;
}
#menu  ul li a:hover { /* efecto hover sobre los enlaces */
  color: #FFF;
  text-decoration: none;
}
#menu  ul.level2, #menu ul.level3 { /* las listas desplegables */
  background: #678;
  border-top: 1px solid #ABC;
  left: 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
}
#menu  ul.level2 li, #menu ul.level3 li { /* cada item de las listas desplegables */
  border-bottom: 1px solid #ABC;
  float: none;
  margin: 0;
  padding: 0;
  width: 150px;
}
#menu  ul.level2 li a, #menu ul.level3 li a { /* cada enlace de las listas desplegables */
  padding: 0 1em;
}
#menu  ul.level2 li a:hover,#menu  ul.level3 li a:hover { /* efecto hover sobre esos enlaces */
  background-color: #456;
}

Hecho esto, ya podemos crear nuestro menú que no será otra cosa que una lista de enlaces:

<div id="menu">
  <ul class="level1" id="root">
    <li>
      <a href="#">Menu 1 (+)</a>
      <ul class="level2">
        <li><a href="#">Submenu 1.1.</a></li>
        <li><a href="#">Submenu 1.2. (+)</a>
          <ul class="level3">
            <li><a href="#">Submenu 1.2.1.</a></li>
            <li><a href="#">Submenu 1.2.2.</a></li>
            <li><a href="#">Submenu 1.2.3.</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 1.3.</a></li>
        <li>
          <a href="#">Submenu 1.4. (+)</a>
          <ul class="level3">
            <li><a href="#">Submenu 1.4.1.</a></li>
            <li><a href="#">Submenu 1.4.2.</a></li>
            <li><a href="#">Submenu 1.4.3.</a></li>
            <li><a href="#">Submenu 1.4.4.</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sep">|</li>
    <li><a href="#">Menu 2</a></li>
    <li class="sep">|</li>
    <li><a href="#">Menu 3</a></li>
    <li class="sep">|</li>
    <li>
      <a href="#">Menu 4 (+)</a>
      <ul class="level2">
        <li><a href="#">Submenu 4.1.</a></li>
        <li>
          <a href="#">Submenu 4.2. (+)</a>
          <ul class="level3">
            <li><a href="#">Submenu 4.2.1.</a></li>
            <li><a href="#">Submenu 4.2.2.</a></li>
            <li><a href="#">Submenu 4.2.3.</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 4.3.</a></li>
      </ul>
    </li>
    <li class="sep">|</li>
    <li><a href="#">Menu 5</a></li>
  </ul>
</div>

Es muy sencillo y para no equivocarse, lo mejor en usar tabulaciones para darnos cuenta visualmente de cuál es la etiqueta que debemos cerrar y, por supuesto, reemplazar el atributo HREF de los enlaces por la dirección URL a donde queremos dirigirnos.