Я пытаюсь создать горизонтальное меню навигации. Меню должно быть полноэкранным, а нижняя граница также имеет ширину. Я более или менее интересовался этим, кроме того, что я хотел бы иметь границу около 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/
Я не могу использовать прописку, поскольку это подталкивает границу вниз, и я хочу иметь границу с фоновым цветом под ней.
Надеюсь, вы это ищете: DEMO
CSS
.nav-menu:after {
background-color:#FEFFE5;
position:absolute;
content:"";
left:0;
right:0;
height:15px;
top:40px;
}
Вы можете использовать after и before псевдо классы для желаемого результата.
Попытайтесь заменить маржу на отступы. Подробнее в полевой модели: 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;
}