CSS - couleur de fond incluant la marge

Je suis en train de créer un menu de navigation horizontal. Le menu doit être pleine largeur de l'écran, avec une bordure en bas de l'exécution de l'ensemble de la largeur de trop. J'ai plus ou moins fait ce en dehors de je voudrais avoir une marge d'environ 15px sous le menu, et pour cela d'utiliser la couleur de fond de mon menu. Aussi lorsqu'un élément est planait, le hover couleur devrait s'étendre le long de la frontière trop si cela fait sens.

Ici est 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 récipient de nav, et je voudrais la couleur de la bordure pour être utilisé sur la zone de marge trop. Je voudrais aussi en quelque sorte le li éléments hover couleur d'étendre le long de la frontière aussi, mais je n'ai aucune idée de comment cela pourrait être obtenue. Si je mets de la marge et de la frontière sur la li éléments de la frontière ne sera pas exécuté la totalité de la largeur de l'écran.

Mise à jour

Mis à jour mon violon pour inclure une maquette de ce que je veux atteindre - http://jsfiddle.net/J74eE/3/

Je ne peux pas utiliser un rembourrage en tant que pousse le bas de la bordure vers le bas, et je veux avoir une frontière avec la couleur d'arrière-plan au-dessous.

source d'informationauteur user1573618

  1. 12

    J'espère que vous cherchez ceci: DÉMO

    CSS

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

    Vous pouvez utiliser after et before pseudo classes pour votre résultat souhaité.

  2. 8

    Essayer 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;
}