CSS - 余白を含む背景色

Question

横のナビゲーションメニューを作成しようとしています。メニューは全画面幅でなければならず、枠線の下端も全幅を走らせる必要があります。私は多かれ少なかれこれを別にして、メニューの下に約15pxのマージンを持たせたいと思います。これは私のメニューの背景色を使うためです。また、アイテムがホバリングされている場合、ホバー色も境界線の下に広がっている必要があります。ここで

は、これまでの私のメニューのバイオリンです - http://jsfiddle.net/J74eE/2/

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

私は、コンテナNAVの下マージンを設定している、と私はあまりにもマージン領域で使用する境界線の色をしたいと思います。私はどういうわけか、国境の下に広がるような色のアイテムも持っていますが、どうやってこれが達成されるのか分かりません。 li項目にマージンと境界線を置くと、境界線は画面の全幅を走らせません。 http://jsfiddle.net/J74eE/3/

それはのborder-bottomを押し下げるように私は、詰め物を使用することはできません、と私が欲しい - 私はacheiveたいもののモックアップを含めるように私のバイオリンを更新しました

更新

その下に背景色のある境界線を持つこと。

Answer 1

私はあなたがこの探している願っています：あなたはあなたのためにafterとbefore疑似クラスを使用することができますDEMO

CSS

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

望ましい結果。

Answer 2

パディングで余白を置き換えるようにしてください。 は、ボックスモデルでより多くを参照してください：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; 
}