CSS - background-color including margin

Question

I am trying to create a horizontal navigation menu. The menu needs to be full screen width, with a border bottom running the whole width too. I have more or less acheived this apart from I would like to have a margin of about 15px under the menu, and for this to use the background color of my menu. Also when an item is hovered, the hover color should extend under the border too if that makes sense.

Here is a fiddle of my menu so far - http://jsfiddle.net/J74eE/2/

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

I have set a margin under the container nav, and I would like the border color to be used on the margin area too. I would also like to somehow have the li items hover color to extend under the border too but I have no idea how this might be acheived. If I put the margin and border on the li items the border won't run the full width of the screen.

Update

Updated my fiddle to include a mock-up of what I want to acheive - http://jsfiddle.net/J74eE/3/

I can't use padding as that pushes the border-bottom down, and I want to have a border with background-color underneath it.

Answer 1

Try to replace your margin by a padding. 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;
}