Unable to navigate unorderlist menu via keyboard tab - html

Question

I am trying to work out why I can not navigate our menu which uses multiple unordered lists via keyboard.
Does anyone have any tips? I have a feeling its more of a CSS issue than html.
RELATED CSS:
/* MENU */
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
#cssmenu ul{
background:#333333;
height:39px;
list-style:none;
margin:0;
padding:0;
display: table;
width: 100%;
}
#cssmenu li{
padding:0px;
display: table-cell;
width: 115px;
}
#cssmenu li a{
background:#333333 url('../images/seperator.gif') bottom right no-repeat;
color:#FFF;
display:block;
font-weight:normal;
line-height:39px;
margin:0px;
padding:0px 0px;
text-align:center;
text-decoration:none;
width: 115px;
}
#cssmenu li a:hover, #cssmenu ul li:hover a{
background: #2580a2;
color:#FFFFFF;
text-decoration:none;
float: none;
}
#cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:230px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:230px;
}
#cssmenu li:hover li a{
background:none;
}
#cssmenu li ul a{
display:block;
height:35px;
font-size:10px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
width: 205px;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
width: 205px;
}
#cssmenu p{
clear:left;
}
:focus {outline:none;}
::-moz-focus-inner {border:0;}
RELATED HTML CODE:
<div id="cssmenu"> <ul> <li>Home</li>
<li class="has-sub"> Operations <ul>
<li>Individuals
</li>
<li>Aircraft owners
</li>
<li>Aircraft operators
</li>
<li>Flight training
</li>
<li>Aerodromes
</li>
<li>Office of airspace regulation
</li>
<li>Sport aviation
</li>
<li>Class D
</li>
<li>Non-towered aerodromes
</li>
<li>Dangerous goods
</li>
<li>Ground operations
</li>
<li> Non-compliance notice
</li>
<li>Unmanned Aircraft Systems (UAS)
</li>
<li>General Aviation (GA) task force
</li>
<li>Regional Aviation Safety Forum (RASF)
</li>
<li>Drug and Alcohol Management Plans
</li>
</ul></li>
<li class="has-sub"> Airworthiness <ul>
<li>Maintenance regulations
</li>
<li>Personnel
</li>
<li>Certification and design
</li>
<li>Manufacturing
</li>
<li>Continuing airworthiness
</li>
<li>Airworthiness directives
</li>
<li>Maintenance organisations
</li>
<li>Flight test and evaluation
</li>
</ul></li>
<li class="has-sub"> Regulations & policy <ul>
<li>Current rules
</li>
<li>Changing the rules
</li>
<li>Enforcement action
</li>
<li>Policy notices
</li>
<li>Australia's state safety program
</li>
<li>Performance based navigation (PBN)
</li>
<li>Licensing regulations
</li>
</ul></li>
<li class="has-sub"> Manuals & forms <ul>
<li>Manuals
</li>
<li>Forms
</li>
<li>CASA online store
</li>
</ul></li>
<li class="has-sub"> Education <ul>
<li>AviationWorx
</li>
<li>eLearning catalogue
</li>
<li>Flight Safety Australia
</li>
<li> Pilot guides and information
</li>
<li>OnTrack
</li>
<li>Human factors
</li>
<li>Safety management systems
</li>
<li>Seminars and workshops
</li>
<li>Aviation safety advisers
</li>
<li>Advice for air travellers
</li>
<li>CASA online store
</li>
<li>Out-n-Back
</li>
</ul></li>
<li class="has-sub"> Services <ul>
<li>Licences and registrations
</li>
<li>Service standards and fees
</li>
<li>Self Service Portal
</li>
<li>Permission application centre (PAC)
</li>
<li>Aviation medicals
</li>
<li>Delegates and authorised persons
</li>
</ul></li>
<li class="has-sub"> About CASA <ul>
<li>Contact CASA
</li>
<li>CASA board
</li>
<li>CASA's Director
</li>
<li>Recent media releases
</li>
<li>Corporate publications
</li>
<li>CASA on Twitter
</li>
<li>Corporate policy
</li>
<li>Careers at CASA
</li>
<li>Research and statistics
</li>
<li>International Engagement
</li>
<li>CASA mailing lists
</li>
</ul></li>
</ul>
</div>

Answer 1

It is not working because you only have :hover rules which the keyboard does not trigger. When an element has tab focus it has the :focus pseudo-class, you will notice when you add this that your menu items light up when focused but still don't open the menu.
jsFiddle: With :focus rules along side :hover rules
This is due to the following rule:
#cssmenu li:hover ul,
#cssmenu li:focus ul{
display:block;
}
The li never actually gets focus because it has no tab index, the a inside of li gets focus. Since li is a parent of ul but a is a sibling of ul we need to use a different rule to get this targeting to work. We can use the next sibling selector + to target the ul based on a:focus. This gets us one step closer.
#cssmenu li:hover ul,
#cssmenu li a:focus + ul{
display:block;
}
jsFiddle with the above applied
Unfortunately this is as far as you can go with CSS (as far as I'm aware). When we try to go to the next a, :focus will be dropped on the top-level a and the menu will hide as the sub-menu will lose display:block;. Since we can't traverse up the tree when applying styles there is no way we can apply display:block to the ancestor ul when we :focus an a further down.
The only way I can see getting around this is to use JavaScript and handle the focus (and maybe blur()) event for the top-level menu items. We must then also handle the click() event to hide the menu when clicking anywhere in the document otherwise it will stay active.
jsFiddle fully working
CSS
#cssmenu li.force-show ul,
#cssmenu li:hover ul,
#cssmenu li a:focus + ul{
display:block;
}
JS
$('#cssmenu > ul > li > a').focus(function () {
$('#cssmenu > ul > li').removeClass('force-show');
$(this).parent().addClass('force-show');
});
// Clear the menu class if clicked anywhere in the document.
$(document).click(function () {
$('#cssmenu > ul > li').removeClass('force-show');
});

Answer 2

The problem is, that focus in CSS does not bubble up. The nearest I come is this:
/* for instance use it that way */
#cssmenu li a:hover,
#cssmenu li a:focus,
#cssmenu ul li:hover a,
#cssmenu ul li:focus a { }
The example works for the first level. But while going to the second, the first loses it's :focus, and so the submenu is hidden again. I think you need to help a bit with JavaScript.