Menú vertical desplegable sólo con CSS

Este es un menú vertical creado por SOHtanaka; muy simple de armar y no necesita ningún script. Ideal para colocar en una sidebar pero, puede adaptarse para utilizarlo en cualquier parte.

• Item 1Duis diam ligula, luctus nec varius eu, interdum eget turpis. Ut convallis tempor tellus, sed tincidunt velit feugiat quis. Vivamus placerat ligula eu metus molestie tincidunt. Sed tempus porttitor eros vitae vehicula.
• Item 2Suspendisse tristique mauris vel odio pulvinar sit amet consectetur est bibendum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien at tellus euismod feugiat.
• Item 3Morbi porttitor tristique lacus a malesuada. Morbi vel porta metus. Nunc laoreet libero eget erat blandit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer quis nulla nec elit dignissim molestie sit amet vel quam?
• Item 4Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
• Item 5
• Item 6Morbi pretium tincidunt bibendum. Nam ac viverra ipsum. Aenean rutrum lorem sit amet metus.
• Item 7Blandit turpis patria euismod at iaceo appellatio, demoveo esse.

El HTML es similar a casi todos, una lista ordenada con enlaces donde, en una etiqueta SPAN, agregaremos la parte oculta que se expandirá al pasar el cursor por encima:

<ul class="sidenav">
  <li>
    <a href="#">Titulo 1
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  <li>
    <a href="#">Titulo 2
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  .......
</ul>

Y el CSS que ponemos en alguna parte antes de </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>