Extra pixel in firefox on dropdown hover - html

Question

I'm using top: 100% to push the sub-menu dropdown below the main navigation bar on hover but in Firefox the menu is pushed below the border of the menu causing a 1px gap. In webkit browsers it works the way I'm wanting it to, where it shows the sub-menu with no gap in between. I'm using 100% to avoid hard coding in a value.
I created a codepen for testing. I set the border around the menu to red to make it easier to see the issue. The second nav is just showing the hover state.
update
Without display: table; on the .nav-main element, the 1px gap goes away, but I'm using it so I can add display: table-cell; to the nav list items to spread them out and fill the entire nav. Any ideas on how to get around that?
html
<nav role="navigation">
<ul class="nav-main">
<li>Link One</li>
<li>
Link Two
<ul class="sub-menu">
<li>Dropdown Link One</li>
<li>Dropdown Link Two</li>
<li>Dropdown Link Three</li>
</ul>
</li>
<li>Link Three</li>
<li>Link Four</li>
</ul>
</nav>
scss
$pink: #ed2490;
a {
text-decoration: none;
}
.nav-main {
position: relative;
display: table;
margin: 0;
padding: 0;
width: 100%;
border: 1px solid lighten(black, 22%);
border-radius: 4px;
background: lighten(black, 8%);
#include background(linear-gradient(bottom, lighten(black, 8%), lighten(black, 36%)));
font-weight: 500;
line-height: 1;
> li {
display: table-cell;
text-align: center;
position: relative;
&:hover {
.sub-menu {
top: 100%;
}
a {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
}
}
a {
display: block;
color: white;
padding: 15px 10px;
&:hover,
&:focus {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
}
.sub-menu { // dropdown
position: absolute;
top: -999px;
z-index: 10;
margin: 0;
padding: 0;
width: 200px;
background: lighten(black, 4%);
li {
border-top: 1px solid lighten(black, 18%);
&:first-child {
border-top: 0;
}
}
a:hover {
background: $pink;
}
}
}
// For example only
.styleguide-dropdown {
padding: 40px 20px 130px;
}
.nav-main {
border-color: red;
.psuedo-hover {
a {
background: lighten(black, 18%);
background: rgba(black, 0.25);
}
.sub-menu {
top: 100%;
.psuedo-hover {
background: $pink;
}
}
}
}

Answer 1

shudder, anything with display: table-* is inherently going to be very hard to style consistently across browsers.
But, that said, its really not your issue. The following fixes both work:
.submenu { display:none;}
:hover > .submenu { display: block;}
or
.submenu { height: 0; overflow:hidden }
:hover > .submenu { height: auto; }
And either of those should be better for reflow/repaint/re-render than crazy shifts in top. Also they will be more robust in case you ever wanted to re-use that nav lower on a page, without just "hiding" things by sending them up with a negative top.
Cheers.

Answer 2

Removing the 1px border around ul solves the problem; then you can add top and bottom borders to each li. Though the border-radius won't be calculated the same way.
I believe the reason is that the height of ul is more than the height of li with this 2px of border and so 100% of the height of li isn't enough... but I'm really not sure of this one.
Here's a working demo: http://codepen.io/anon/pen/jsBEt