CSS - colore di sfondo incluso margine

Question

Sto tentando di creare un menu di navigazione orizzontale. Il menu deve essere a schermo intero, con un bordo inferiore che esegue anche l'intera larghezza. Ho più o meno raggiunto questo, a parte il fatto che mi piacerebbe avere un margine di circa 15px sotto il menu, e per questo usare il colore di sfondo del mio menu. Inoltre, quando un oggetto è al passaggio del mouse, il colore al passaggio del mouse dovrebbe estendersi anche sotto il bordo se ciò ha senso.

Ecco un violino del mio menù finora - http://jsfiddle.net/J74eE/2/

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

ho impostato un margine al di sotto del nav del contenitore, e vorrei che il colore del bordo per essere utilizzato sulla zona margine di troppo. Mi piacerebbe anche che gli elementi li passino sopra il colore per estendersi anche sotto il bordo, ma non ho idea di come si possa ottenere ciò. Se metto il margine e il bordo sugli elementi li il bordo non eseguirà tutta la larghezza dello schermo.

Aggiornamento

aggiornato il mio violino per includere un mock-up di quello che voglio acheive - http://jsfiddle.net/J74eE/3/

non posso usare imbottiture come che spinge il border-bottom verso il basso, e voglio per avere un bordo con colore di sfondo al di sotto di esso.

Answer 1

Spero che alla ricerca di questo: DEMO

CSS

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

È possibile utilizzare after e beforeclassi pseudo per la vostra risultato desiderato.

Answer 2

Prova a sostituire il margine con una imbottitura. See more at box model: 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; 
}