Сделать отдельный элемент в меню выше его родительской высоты

Question

Мне нужно сделать дизайн, в котором находится верхняя страница, разделенная на 3 секции. Сначала заголовок, под заголовком находится граница и под этой границей находится меню. Проблема в том, что часть границы над выделенным меню должна менять цвет.

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

Чтобы было ясно, вот образы, как меню выглядит теперь, когда парили и как это должно выглядеть следующим образом:

HTML:

<div class="header"></div> 
<div class="head_menu"> 
    <div class="menu"> 
     <ul> 
      <li><a href="#">Menu 1</a></li> 
      <li><a href="#">Menu 2</a></li> 
      <li><a href="#">Menu 3</a></li> 
     </ul> 
    </div> 
</div> 

CSS:

.header { 
    background-color: #AC3123; 
    height: 70px; 
} 
.head_menu { 
    background-color: #972B1E; 
    border-bottom: 7px solid #E8E8E8; 
    position: relative; 
    height: 55px; 
} 
.menu { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    background: #4d5057 
} 
.menu ul { 
    overflow: hidden; 
    max-width: 300px; 
    margin: auto; 
    padding: 0; 
    } 
.menu ul li { 
    float: left; 
    list-style: none; 
} 
.menu ul li a { 
    display: block; 
    padding: 15px 12px 14px 12px; 
    color: #fff; 
} 
.menu ul li a:hover { 
    color: #000; 
    background: #e8e8e8; 
} 

Answer 1

Там много чего вы можете сделать, чтобы решить эту проблему.

Простейшей задачей было бы не использовать границу для вашей темно-красной полосы. Вместо этого вы можете использовать псевдоэлемент и наложить его под своим li, используя правильный индекс z. Вот jsFiddle: http://jsfiddle.net/rgthree/4BWNB/

HTML:

<div class="header"></div> 
<div class="head_menu"> 
    <div class="menu"> 
     <ul> 
      <li><a href="#">Menu 1</a></li> 
      <li><a href="#">Menu 2</a></li> 
      <li><a href="#">Menu 3</a></li> 
     </ul> 
    </div> 
</div> 

CSS:

.header { 
    background-color: #AC3123; 
    height: 70px; 
} 
.menu ul { 
    position:relative; 
    background: #4d5057; 
    border-bottom: 7px solid #E8E8E8; 
    text-align:center; 
    list-style: none; 
    padding:0px; 
    margin:0px; 
} 
.menu ul:before { 
    content:''; display:block; font-size:0px; 
    position:absolute; left:0px; top:0px; right:0px; height:7px; z-index:1; 
    background:#972B1E; 
} 
.menu ul li { 
    position:relative; z-index:2; 
    display:inline-block; 
    padding:0px; 
    margin:0x; 
} 
.menu ul li a { 
    display: block; 
    padding: 22px 12px 14px 12px; 
    color: #fff; 
} 
.menu ul li a:hover { 
    color: #000; 
    background: #e8e8e8; 
} 

Answer 2

Я сомневаюсь, что это это правильный путь, но я получил его на работу, используя только CSS

Я добавил span в список ваших товаров

<ul> 
    <li><span></span><a href="#">Menu 1</a> 
    </li> 
    <li><span></span><a href="#">Menu 2</a> 
    </li> 
    <li><span></span><a href="#">Menu 3</a> 
    </li> 
</ul> 

и добавили CSS

.menu ul li:hover span { 
    color: #000; 
    background: #e8e8e8; 
} 
.menu ul li span:hover { 
    background: #972B1E; 
} 
.menu li span { 
    position: absolute; 
    top: -8px; 
    height: 8px; 
    width: 73px; 
} 

http://jsfiddle.net/JR3xR/2/