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

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

2 个答案: