I managed to create a dropdown menu without relying on any JavaScript, but I'm encountering some issues with its functionality in Firefox and IE 10. This is how it appears:
Both Link1 and Link2 are clickable links. In Chrome, clicking on them works smoothly - I get directed to the expected page. However, in Firefox and IE10, the menu simply closes without taking me to the link.
I initially suspected a z-index problem and attempted to resolve it by adding that property, but it didn't seem to have any effect. Interestingly, hovering over the links in Firefox does display the tooltip with the link address.
Any insights into what might be causing this issue? Or perhaps there's a more effective way to achieve this without resorting to JavaScript?
Below is the markup used:
<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">
<a href="/Test2">Link2</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
The CSS code is quite extensive:
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;
}
...
For further reference, here is the JSFiddle link: JSFiddle