Css menu unclickable links - html

Question

I built a little drop down menu without using any javascript, but it's not quite co-operating in firefox and IE 10. Here's what it looks like:
Both Link1 and Link2 are links. In chrome, clicking on them works fine - I get redirected as expected. In firefox and IE10, however, the menu just closes without visiting the link.
I thought it might be a z-index problem but I tried adding that and it didn't seem to do anything. Hovering over those links in firefox does bring up the tooltip showing the link address as well.
Any idea what might be causing this? Or is there a better way to do this? I'd like to try t avoid using javascript if possible.
Markup:
<ul class="header-right">
<li>
<ul class="user-menu">
<li class="menu-item" tabindex=0 id="submenu_li">
<span class="sub-menu-header" title="Menu">Long menu name Menu</span>
<div class="dropdown"></div>
<div class="user-sub-menu" id="user-sub-menu">
<ul class="submenu-list">
<li class="submenu-item">
<a id="a1" href="/Test">Link1</a>
</li>
<li class="submenu-item">
Link2
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
Css is kind of long:
ul.header-right
{
position: absolute;
top: 7px;
right: 10px;
list-style-type: none;
margin: 0;
}
ul.header-right li
{
display: inline-block;
padding-left: 2px;
vertical-align: top;
}
li.menu-item
{
padding: 2px 2px 2px 10px !important;
}
li.menu-item:hover
{
background-color: #888888;
cursor: pointer;
}
li.menu-item:focus #user-sub-menu
{
display: block;
}
ul.user-sub-menu a, ul.user-sub-menu a:visited
{
text-decoration: none;
color: #232323;
}
div.user-sub-menu
{
display: none;
background-color: #FFFFFF;
min-width: 125px;
max-width: 300px;
min-height: 50px;
max-height: 400px;
position: absolute;
right: 22px;
z-index: 1000;
border: 1px solid #DDDDDD;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
color: #232323;
font-size: 1em;
}
div.user-sub-menu ul
{
display: block;
margin: 0;
padding: 0;
}
div.user-sub-menu li
{
display: block;
padding: 2px 2px 2px 2px;
font-size: 1.15em;
border: 1px solid #FFFFFF;
}
div.user-sub-menu li a, div.user-sub-menu li a:visited
{
text-decoration: none;
color: #232323;
}
div.user-sub-menu li:hover
{
text-decoration: none;
background-color: #CCFFCC;
border: 1px solid #DDDDDD;
}
JSFiddle

Answer 1

I eventually figured out what was happening (or at least, I think I did).
When I focus li.menu-item the #user-sub-menu div appears as is all well and good. However, if I click on an element inside that div, such as one of the links, technically the li.menu-item element has lost the focus and makes the div invisible.
My best guess is that chrome processed the link click before it processed the focus change, and thus things worked right away. For firefox, I added the following css to keep the #user-sub-menu div open even when li.menu-item loses focus.
#user-sub-menu:active, #user-sub-menu:hover, #user-sub-menu:focus
{
display: block;
}
As a result this now works fine in Firefox. Unfortunately it still doesn't work in IE, so if anyone else has any insights there I'm happy to hear them, but I'll mark this as answered for now.