CSS - couleur de fond incluant la marge

Question

J'essaye de créer un menu de navigation horizontal. Le menu doit être en largeur d'écran, avec un fond de bordure sur toute la largeur. Je l'ai plus ou moins réalisé en dehors de ce que je voudrais avoir une marge d'environ 15px sous le menu, et pour cela d'utiliser la couleur de fond de mon menu. De même, lorsqu'un objet est plané, la couleur du survol doit également s'étendre sous la bordure si cela a du sens.

Voici un violon de mon menu à ce jour - http://jsfiddle.net/J74eE/2/

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

J'ai mis une marge sous le conteneur nav, et je voudrais la couleur de bordure à utiliser sur la zone de marge trop. Je voudrais également que les éléments de la couleur du trait flottent sous la frontière, mais je ne sais pas comment cela pourrait être réalisé. Si je mets la marge et la bordure sur les éléments li, la bordure ne fonctionnera pas sur toute la largeur de l'écran.

Mise à jour

mis à jour mon violon d'inclure une maquette de ce que je veux acheive - http://jsfiddle.net/J74eE/3/

Je ne peux pas utiliser rembourrage qui pousse le fond de la frontière vers le bas, et je veux avoir une bordure avec la couleur de fond en dessous.

Answer 1

J'espère que vous cherchez ceci: DEMO

CSS

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

Vous pouvez utiliser after et beforeclasses de pseudo pour votre résultat désiré.

Answer 2

Essayez de remplacer votre marge par un rembourrage. Voir plus au modèle de boîte: 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; 
}