CSS drop down menu on focus disappears when accessing with keyboard - css

Question

I have a CSS drop down that appears on either mouse over or keyboard focus, and though the drop down is accessible with the mouse, when you try to access it with the keyboard the the drop down vanishes (but you still cycle through the items).
Anyone have some ideas on how to keep the drop down visible when accessing the drop down menu items with the keyboard? The CSS code is below.
You can access a demo at: http://testingtesting1.info/joomla-test/
the HTML code is generated by Joomla.
/* Parent menu items */
.h-nav {
width:720px;
height:90px;
}
.h-nav ul {
left:0;
}
.h-nav li {
display:block;
list-style:none;
position:relative;
float:left;
margin-right:10px;
}
.h-nav a {
display:block;
padding:33px 24px;
margin:0;
float:left;
}
.h-nav li a:hover,
.h-nav li a:focus {
background-color:#ffbb58;
}
.h-nav li.parent {
background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
text-align:left;
}
.h-nav li li a:hover,
.h-nav li li a:focus {
text-decoration:underline;
background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
margin:4px auto;
position:absolute;
margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
text-align:left;
padding:10px 5px;
width:220px;
background:url("../../images/standard/bg-submenu.png") repeat;
z-index:9999;
/*rounded corners - rounding only bottom corners */
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
-moz-border-bottom-right-radius:10px 10px;
-webkit-border-bottom-left-radius:10px 10px;
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
margin:auto;
top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
display:block;
padding:2px 25px;
}

Answer 1

If you don't have the ability to access the html and manually add a tabindex, or it is dynamically generated every time, you can use Javascript to add a tabindex to the li elements (this is with jQuery):
$(document).ready(function(){
$('.h-nav>li').attr('tabindex',0);
});
or regular Javascript:
window.onload=function(){
menu = document.getElementById("h-nav")
navElems = menu.getElementsByTagName('li');
for(e = 0; e < navElems.length; e++){
if(navElems[e].parentNode == menu){
navElems[e].tabIndex = 0;
}
}
}
If you can't add a tabindex, I don't believe there is any other way to focus on the li
EDIT 9/21/13
This is not perfect, but it would be usable for keyboard only.
JS Fiddle
For it to work, you can't have a sub-ul that contains the li's with anchors; the anchors must be siblings. This solution uses the ~ selector, which unfortunately only applies to siblings after the targeted element, so it makes the anchors before the focused one disapear.