CSS hover visualizar elementos ocultos

[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.