html - CSS - 背景颜色包括边距

Question

我正在尝试创建一个水平导航菜单。菜单需要全屏宽度，边框底部也需要整个宽度。除了我想在菜单下留出大约 15px 的边距之外，我或多或少已经实现了这一点，为此我使用了菜单的背景颜色。此外，当一个元素悬停时，如果有意义的话，悬停颜色也应该延伸到边框下方。

到目前为止，这是我的菜单 - http://jsfiddle.net/J74eE/2/

Tried to insert my code here but the li items got converted to bullets

我在容器导航下方设置了边距，我希望边距区域也使用边框颜色。我也想以某种方式让 li 元素的悬停颜色也延伸到边框下方，但我不知道如何实现。如果我将边距和边框放在 li 元素上，边框将不会占据屏幕的整个宽度。

更新

更新了我的 fiddle 以包含我想要实现的目标的模型 - http://jsfiddle.net/J74eE/3/

我不能使用填充，因为它会将 border-bottom 向下推，我想在它下面有一个带有背景颜色的边框。

Answer 1

尝试用填充替换边距。 查看更多盒子型号:http://www.w3.org/TR/CSS2/box.html

.nav-menu {
   background-color:#FEFFE5;  
   clear:both;
   float:left;
   padding:0px 0px 15px 0px;
   border-bottom: 1px solid #dbd7d4;
   width:100%;
   font-size:13px;  
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}