I have the following menu (simplified):
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>
That menu works, if I hover the mouse over sections 2 and 3, it opens a submenu where you can choose more options, but it has a problem: if the user only uses the keyboard (because they don't have a mouse or because they are using a screen reader), the submenus do not open correctly.
For example, if we press the tab button it jumps to "Section 1", then "Section 2" (and its submenu does not open), then to "Section 3" (instead of entering the "Section 2" submenu , and its submenu does not open either) and finally "Section 4".
How can I make it so that when I get to "Section 2" or "Section 3" the submenus open? Would it be possible to use the cursors and not just the tabulator? Is it possible to do it with just HTML+CSS or would JavaScript be required?