18

我正在尝试创建一个水平导航菜单。菜单需要全屏宽度，边框底部也需要整个宽度。我或多或少地实现了这一点，除了我希望菜单下有大约 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/

我不能使用填充，因为它会将边框底部向下推，我希望在它下面有一个带有背景颜色的边框。

4

2 回答 2

14

尝试用填充替换您的边距。在盒子模型中查看更多信息：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;
}
于 2012-11-16T11:37:30.963 回答
13

我希望你正在寻找这个：DEMO

CSS

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

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

于 2012-11-16T11:55:05.993 回答