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?
Using the Adobe plugin - Accessible-Mega-Menu and creating a small script that opens the submenu when it detects if it is in
focus
.You can use the attribute
tabindex
to make elementsli
focusable. Then, using the selectorfocus
, make your submenus show usingdisplay:block
.In this way you will be able to navigate by means of the tabulator through the different elements of the menu and the corresponding submenus will be displayed.
Here is your modified code: