When using top: 100% to position a sub-menu dropdown below the main navigation bar on hover, there seems to be an issue in Firefox where the menu is pushed below the border of the menu causing a small gap. Interestingly, this works as expected in Webkit browsers without any gaps. The use of 100% is deliberate to avoid hard-coding specific values.
To better illustrate the problem, I have created a test scenario on CodePen, with the menu bordered in red for clarity. The second nav simply demonstrates the hover state.
Update:
The gap issue disappears if I remove display: table; from the .nav-main element. However, I need to retain it to be able to apply display: table-cell; to the navigation list items for proper spacing and alignment across the entire navigation. Any suggestions on how to resolve this dilemma?
HTML:
<nav role="navigation">
<ul class="nav-main">
<li><a href="#">Link One</a></li>
<li>
<a href="#">Link Two</a>
<ul class="sub-menu">
<li><a href="#">Dropdown Link One</a></li>
<li><a href="#">Dropdown Link Two</a></li>
<li><a href="#">Dropdown Link Three</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></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 style demonstration 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;
}
}
}
}