Make single item in menu exceed it's parent's height - css

Question

I'm required to do design in which there is top page divided into 3 sections. First is header, under the header is border and under this border is menu. Problem is that part of border above highlighted menu should change color.
Now, i spent whole day on this little thing and I don't have any more ideas how can I make this work. I know I can make it work if I put there background image which have all these layers in it, but I don't think this is best way. This example is of course much simpler then real design. Do you have better ideas?
To be clear, here are images of how menu looks now when hovered and how it should look like:
HTML:
<div class="header"></div>
<div class="head_menu">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</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

There are a lot of things you can do to resolve this issue.
One simple thing would be to not use border's for your dark-red strip. Instead, you could use a pseudo-element, and layer it underneath your li's using a correct z-index. Here's a jsFiddle: http://jsfiddle.net/rgthree/4BWNB/
HTML:
<div class="header"></div>
<div class="head_menu">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</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

I doubt this is the right way, but i got it to work using only css
I added a span into your list items
<ul>
<li><span></span>Menu 1
</li>
<li><span></span>Menu 2
</li>
<li><span></span>Menu 3
</li>
</ul>
and added this 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/