Estaba tratando de crear un menú horizontal del que cuelga un submenú vertical y del que a su vez cuelga otro submenú vertical. El problema está en que al desplegar el primer sub-submenú (Opción 3.3) se queda congelado y no me permite seleccionar otras opciones del mismo nivel (Opción 3.4 y Opción 3.5).
ul {
display: inline-block;
list-style: none;
}
nav > ul > li {
float: left;
}
a {
display: block;
width: 12vw;
height: 6vh;
line-height: 6vh;
}
a:hover {
background: grey;
}
li > ul {
display: none;
position: absolute;
}
ul ul > li ul li {
position: relative;
left: 12vw;
top: -6vh;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li>
<a href="#">Opción 3</a>
<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li>
<a href="#">Opción 3.3</a>
<ul>
<li><a href="#">Opción 3.3.1</a></li>
<li><a href="#">Opción 3.3.2</a></li>
<li><a href="#">Opción 3.3.3</a></li>
<li><a href="#">Opción 3.3.4</a></li>
<li><a href="#">Opción 3.3.5</a></li>
</ul>
</li>
<li><a href="#">Opción 3.4</a></li>
<li>
<a href="#">Opción 3.5</a>
<ul>
<li><a href="#">Opción 3.5.1</a></li>
<li><a href="#">Opción 3.5.2</a></li>
<li><a href="#">Opción 3.5.3</a></li>
<li><a href="#">Opción 3.5.4</a></li>
<li><a href="#">Opción 3.5.5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Es algo que realmente me resulta curioso puesto que un código CSS similar me ha funcionado cuando son todos los menús verticales.
¿Cuál es mi error?¿Cómo puedo solucionarlo?
Muchas gracias.