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>
 

[mbm150]

Hola,

tienes que meter listas dentro de las listas para que al hacer hover puedas manipularlas.

Código HTML:

<ul>
    <li>
        <a href="">1. Cosa</a>
        <ul>
            <li>
                <a href="">1.1. Cosa dentro de cosa</a>
            </li>
            <li>
                <a href="">1.2. Cosa dentro de cosa</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="">2. Cosa</a>
        <ul>
            <li>
                <a href="">2.1. Cosa dentro de cosa</a>
            </li>
            <li>
                <a href="">2.2. Cosa dentro de cosa</a>
            </li>
        </ul>
    </li>
</ul>
 

Código CSS:

ul>li>ul{
display: none;
}
 
ul>li:hover>ul{
display: block;
}
 

Y así todas las veces que quieras. Con css3 puedes crear animaciones y lo que quieras, esto sería el ejemplo más básico. Te dejo el ejemplo en funcionamiento para que pruebes.

https://jsfiddle.net/mbm150/p938f3ra/

Saludos.