Tengo el siguiente menú (simplificado):
nav ul, nav li {
display:inline-block;
list-style:none;
margin:0;
padding:0;
}
nav > ul {
background:#ccc;
height:40px;
width:100%;
}
nav > ul > li {
line-height:40px;
position:relative;
float:left;
padding:0 10px;
}
nav > ul > li > ul {
position:absolute;
left:0;
top:40px;
background:#aaa;
display:none;
}
nav > ul > li:hover > ul {
display:block;
}
nav > ul > li > ul > li {
width:150px;
padding:0 10px;
}
<nav>
<ul>
<li><a href="#">Sección 1</a></li>
<li>
<a href="#">Sección 2</a>
<ul>
<li><a href="#">Sub-Sección 2.1</a></li>
<li><a href="#">Sub-Sección 2.2</a></li>
<li><a href="#">Sub-Sección 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Sección 3</a>
<ul>
<li><a href="#">Sub-Sección 3.1</a></li>
<li><a href="#">Sub-Sección 3.2</a></li>
</ul>
</li>
<li><a href="#">Sección 4</a></li>
</ul>
</nav>
Ese menú funciona, si paso el ratón sobre las secciones 2 y 3, se abre un submenú en el que se pueden elegir más opciones, pero tiene un problema: si el usuario sólo utiliza el teclado (porque no tenga ratón o porque esté usando un lector de pantalla), los submenús no se abren correctamente.
Por ejemplo, si le damos al botón tabulador va saltando a "Sección 1", luego "Sección 2" (y no se abre su submenú), luego a "Sección 3" (en lugar de entrar en el submenú de "Sección 2", y tampoco se abre su submenú) y por último "Sección 4".
¿Cómo puedo hacer para que cuando llegue a la "Sección 2" o "Sección 3" se abran los submenús? ¿Sería posible usar los cursores y no sólo el tabulador? ¿Es posible realizarlo sólo con HTML+CSS o haría falta JavaScript?