CSS hover visualizar elementos ocultos

[mblascog]

Buenas,
Quisiera saber si lo siguiente es posible con CSS.
Inicialmente quiero visualizar una lista con tres elementos:
- Opción 1
- Opción 2
- Opción 3
Al ponerse el ratón encima de la opción 2, quisiera visualizar:
- Opción 2.1
- Opción 2.2
Y al posicionarme encima de 2.1, visualizar:
- Opción 2.1.1
- Opción 2.1.2
- Opción 2.1.3
- Opción 2.1.4
Ya sé que puede hacerse con javascript, jquery, .... pero he visto un ejemplo donde se hace pero no logro entenderlo. Gracias

Código HTML:

<ul id="nav">
    <li><a href="#">Opción 1</a></li>
    <li id="opcion"><a href="#">Opción 2</a>
    <li class="subOpcion"><a href="#">Opción 2.1</a></li>
    <li><a class="subOpcion2" href="#">Opción 2.1.1</a></li>
    <li><a class="subOpcion2" href="#">Opción 2.1.2</a></li>
    <li><a class="subOpcion2" href="#">Opción 2.1.3</a></li>
    <li><a class="subOpcion2" href="#">Opción 2.1.4</a></li>
    <li class="subOpcion"><a href="#">Opción 2</a></li>
    <li id="opcio"><a href="#">Opción 3</a></li>
</ul>