CSS - 包含边距的背景颜色

我正在尝试创建一个水平导航菜单。菜单需要全屏宽度，边框底部也是全宽。除此之外，我已经或多或少实现了这一点，我希望菜单下的边距大约为15px，并使用菜单的背景颜色。另外，当一个项目被徘徊时，如果有意义的话悬停颜色也应该延伸到边界下方。CSS - 包含边距的背景颜色

这里是我的菜单的小提琴至今 - http://jsfiddle.net/J74eE/2/

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

我已经设置了容器NAV下缘，我想可以在边缘区域也采用了边框颜色。我也想以某种方式让李的项目悬停在边界的颜色，但我不知道如何实现这一目标。如果我将边缘和边框放在li项目上，边框将不会运行整个屏幕的宽度。

更新

更新了我的小提琴，包括什么，我想acheive实物模型 - http://jsfiddle.net/J74eE/3/

我不能使用填充作为推动下边框了，我想在其下面具有背景色的边框。

来源

2012-11-16 user1573618

不知道你到底在找什么 - 快速模拟将有所帮助。 –

我希望您正在寻找这样的：DEMO

CSS

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

您可以使用after和before伪类您预期的结果。

来源

2012-11-16 11:55:05

非常感谢！我可以在我的li元素上使用：after伪类，以便当它们被徘徊时，该行下的空间也获得悬停颜色。 – user1573618

尝试用填充替换您的边距。多见于盒模型：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-16 11:37:30 gregorySalvan

它将与填充一起工作，除非您将'background-clip'样式设置为'content-box'。在后一种情况下，填充区域不会着色。谨防！ –

CSS - 包含边距的背景颜色

回答

相关问题