CSS - Hintergrundfarbe inklusive Rand

Question

Ich versuche ein horizontales Navigationsmenü zu erstellen. Das Menü muss die volle Bildschirmbreite haben, mit einem Rand, der auch die ganze Breite durchläuft. Ich habe das mehr oder weniger erreicht, abgesehen davon, dass ich unter dem Menü einen Rand von ungefähr 15px haben möchte, und dafür die Hintergrundfarbe meines Menüs zu verwenden. Auch wenn ein Element schwebt, sollte die Hover-Farbe auch unter der Grenze reichen, wenn das sinnvoll ist.

Hier ist eine Geige meines Menüs so weit - http://jsfiddle.net/J74eE/2/

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

ich einen Spielraum unter dem Container nav festgelegt habe, und ich würde die Rahmenfarbe wie auch auf dem Randbereich verwendet werden. Ich möchte auch irgendwie die li-Elemente schweben Farbe unter der Grenze zu erweitern, aber ich habe keine Ahnung, wie dies erreicht werden könnte. Wenn ich den Rand und den Rahmen an die li-Elemente anschließe, wird der Rahmen nicht über die gesamte Breite des Bildschirms verlaufen.

aktualisieren

meine Geige Aktualisiert ein Mock-up zu schließen, was ich acheive wollen - http://jsfiddle.net/J74eE/3/

Ich kann nicht padding verwenden wie die border-bottom nach unten drückt, und ich will eine Grenze mit Hintergrundfarbe darunter haben.

Answer 1

Ich hoffe, dass Sie für diese suchen: DEMO

CSS

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

können Sie after und beforeKlassen Pseudo verwenden für Ihre erwünschtes Ergebnis.

Answer 2

Versuchen Sie, den Rand durch eine Auffüllung zu ersetzen. mehr bei Box-Modell Siehe: 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; 
}