George Jempty George Jempty - 1 year ago 66
CSS Question

Why is there a gap between 1st level sub-menu and 2nd level menu?

I'm trying to create a horizontal menu system (essentially tabs with drop downs) from some code on the internet and it runs just fine here, i.e. there is no gap between 1st and 2nd level submenus.

enter image description here

However when I try to extract the relevant HTML (view source and grab from link above) and link to the relevant CSS (also see above), and run it either on my local system, or on jsfiddle, there is a gap. Below is my screenshot with minor modifications (font 1em instead of 11px, height auto instead of 1%, and mostly top level menu items I actually need), and here is a link to jsfiddle code based faithfully on the original, that still shows the gap. What is causing this and how can I get rid of it?

(At the very bottom is all the CSS inline so SO doesn't complain about a link to jsfiddle not being accompanied by code; additionally I am under instructions to not using Bootstrap as the modern look and feel will clash too much with our current legacy code)

enter image description here

/*
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; }

Answer Source

The browser applies default left padding to ul elements. This will get rid of it.

ul#navmenu-h ul {
  padding: 0; 
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download