I am currently working on building a horizontal menu system that resembles tabs with dropdowns. I found some code online that seems to be exactly what I need, and it runs perfectly fine on the source website without any gaps between the first and second level submenus.
https://i.sstatic.net/WkvGX.png
However, when I try to use the HTML code (pulled from the source link) and connect it to the corresponding CSS (also sourced from the same place), and execute it either locally or on JSFiddle, a gap appears. Below is my screenshot featuring slight modifications (like changing font size to 1em instead of 11px, adjusting height from 1% to auto, and focusing on the top-level menu items I specifically need). Also provided is a link to the JSFiddle version that faithfully follows the original structure but still exhibits the gap issue. What could be causing this inconsistency and how can I eliminate it?
(I have included all the CSS inline at the bottom to prevent issues with links to external resources; additionally, I have been advised against using Bootstrap as its modern aesthetic clashes too heavily with our existing legacy code)
https://i.sstatic.net/j4ped.png
/*
FILE ARCHIVED ON 17:27:37 Jan 13, 2010 AND RETRIEVED FROM THE
INTERNET ARCHIVE ON 16:43:49 Feb 7, 2017.
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.
ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
SECTION 108(a)(3)).
*/
/*
Author: Craig Erskine
Description: Dynamic Menu System - Horizontal/Vertical
*/
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }
ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display: inline; position: relative; }
ul#navmenu-h ul li { width: 100%; display: block; }
/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #BBB;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #BBB;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }