CSS - 背景颜色,包括保证金

Question

我正在尝试创建一个水平导航菜单.菜单需要是全屏宽度,边框底部也是整个宽度.除了我希望在菜单下有大约15px的边距之外,我或多或少地实现了这一点,并且为此使用菜单的背景颜色.此外,当项目悬停时,如果有意义,悬停颜色也应该在边框下方延伸.

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

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

我在容器导航下设置了一个边距,我也想在边距区域使用边框颜色.我还想以某种方式让li物品悬停颜色以在边界下延伸,但我不知道如何实现这一点.如果我将边距和边框放在li项上,边框将不会运行屏幕的整个宽度.

更新

更新了我的小提琴,包括我想要实现的模型 - http://jsfiddle.net/J74eE/3/

我不能使用填充,因为它推动边框向下,我希望在它下面有一个背景颜色的边框.

Answer 1

我希望你在寻找这个:DEMO

CSS

.nav-menu:after {
  background-color:#FEFFE5;
  position:absolute;
  content:"";
  left:0;
  right:0;
  height:15px;
  top:40px;
}

您可以使用after和before 伪类来获得所需的结果.

Answer 2

尝试用填充替换边距.有关详情,请参阅框模型: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;
}