为什么一级子菜单和二级菜单之间有间隙？

Question

我正在尝试根据 Internet 和 it runs just fine here 上的一些代码创建水平菜单系统（本质上是带下拉菜单的选项卡），即一级和二级子菜单之间没有间隙。

然而，当我尝试提取相关的 HTML（查看源代码并从上面的 link 抓取）和 link 到相关的 CSS（也见上面）和运行它在我的本地系统或 jsfiddle 上存在差距。下面是我稍作修改后的屏幕截图（字体 1em 而不是 11px，高度自动而不是 1%，主要是我真正需要的顶级菜单项），这里是 link 到 jsfiddle code 忠实地基于原来，那仍然显示出差距。是什么原因造成的，我该如何摆脱它？

（在最底部是所有 CSS 内联所以 SO 不会抱怨 link 到 jsfiddle 没有伴随代码；另外我正在接受不使用 Bootstrap 因为现代的外观和感觉会与我们当前的遗留代码冲突太多）

/*
     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 1

浏览器将默认左内边距应用到 ul 元素。这将摆脱它。

ul#navmenu-h ul {
  padding: 0; 
}

为什么一级子菜单和二级菜单之间有间隙？

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

html

css

navbar

navigationbar