My floating list menu is behaving oddly in Firefox. It only displays correctly after clearing the cache, but as soon as I refresh the page, the menu breaks again.
The links inside the list elements appear wider than the text, even though I haven't set any width. Strangely, when I right-click on those links, the width seems to correct itself.
Any thoughts on what might be causing this issue?
You can view the problem in action here: https://jsfiddle.net/cc43r3nm/2/. Notice the extra space after each main item in Firefox, which disappears when you right-click and move the mouse.
Unfortunately, the Stackoverflow snippet doesn't render it correctly.
.navigation {
position: relative;
top: 45px;
left: -50%;
z-index: 800;
}
.navcontainer {
float: right;
position: relative;
top: 4px;
font-size: 16px;
}
/* More CSS styling... */
HTML:
<div class="navigation">
<div class="navcontainer" class="first_row">
<ul class="category_nav">
<li class="first_navcontainer">
<a href="">Example 1</a>
<ul class="">
<li><a href="">Link</a></li>
<!-- more list items -->
</ul>
</li>
<!-- more list items -->
</ul>
</div>
<div class="navcontainer" class="second_row">
<ul class="category_nav">
<li class="first_navcontainer">
<a href="">Example 6</a>
<ul class="">
<li><a href="">Link</a></li>
<!-- more list items -->
</ul>
</li>
<!-- more list items -->
</ul>
</div>
</div>