Firefox shows gap between main and dropdown menu with increased line height - html

Question

In this jsfiddle I do have a menu which displays dropdown menus for some items. The main menu and the submenu items do have an increased height. I am using the line-height property for this purpose.
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #bbb;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
While the dropdown menu is displayed seemlessly below its parent item in Chrome, IE and Edge, Firefox displays a gap, which not only looks unfavourable but also makes the dropdown go away when the mouse cursor is moved there for selection. The problem does not appear with 'normal' height.
For line-height: 200%; I was able to fix the problem by adding top: 138%; to the ul of the dropdown, but frankly this approach is too much try-and-error.
Is there a cleaner solution for Firefox?

Answer 1

Use position to get the same
Update css part
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position:relative; /*add this*/
}
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position:absolute; /*add this*/
top:auto; /*add this you can change as your need */
left:0px; /*add this you can change as your need */
}
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
/* put the top margin into the header, otherwise there will always be a vertical scrollbar */
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position: relative;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position: absolute;
top: auto;
left: 0px;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #eee;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<!DOCTYPE html>
<body>
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Working fiddle also included
fiddle link