CSS - цвет фона, включая маржу

Я пытаюсь создать горизонтальное меню навигации. Меню должно быть полноэкранным, а нижняя граница также имеет ширину. Я более или менее интересовался этим, кроме того, что я хотел бы иметь границу около 15px под меню, и для этого использовать цвет фона моего меню. Также, когда элемент парит, цвет зависания должен также расширяться под границей, если это имеет смысл.

Вот скрипка моего меню до сих пор - http://jsfiddle.net/J74eE/2/

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

Я установил поле под контейнером nav, и я бы хотел, чтобы цвет границы использовался и на области поля. Я также хотел бы как-то поменять цвет элементов li на границе, но я понятия не имею, как это может быть достигнуто. Если я поместил маржу и границу на элементы li, граница не будет работать по всей ширине экрана.

Обновление

Обновлен мой скрипт, чтобы включить макет того, что я хочу добиться - http://jsfiddle.net/J74eE/3/

Я не могу использовать прописку, поскольку это подталкивает границу вниз, и я хочу иметь границу с фоновым цветом под ней.

Ответ 1

Надеюсь, вы это ищете: DEMO

CSS

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

Вы можете использовать after и before псевдо классы для желаемого результата.

Ответ 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;
}