Child element only covering parent image - html

Question

I have a menu where I want to have an active state and a hover state of the menu items. My problem is illustrated best in the two images. The green background color should only cover the dark orange area (Which is an image).
This is my menu now:
And this is how I want it to be:
Which way is best to cut the bottom of the green element to get this effect?
My code so far in JSFIDDLE:
http://jsfiddle.net/HC5qC/
CSS:
nav ul {
padding: 0;
list-style-type: none;
position: absolute;
right: 96px;
top: 37px;
}
nav li {
float: left;
}
nav a {
text-decoration: none;
font-weight: 400;
font-size: .9375em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
padding: 54px 15px 65px 15px;
overflow: hidden;
}
.current-menu-item a,
.current-menu-item a:hover {
background: #79bd8f; /* Old browsers */
background: -moz-linear-gradient(top, #79bd8f 30%, #00a388 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#79bd8f), color-stop(99%,#00a388)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* IE10+ */
background: linear-gradient(to bottom, #79bd8f 30%,#00a388 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bd8f', endColorstr='#00a388',GradientType=0 ); /* IE6-9 */
}
nav a:hover {
background: #6b1600;
background: rgba(107, 22, 0, 0.2);
}

Answer 1

I wonder if something like this FIDDLE might get you started.
I'll play around with it a bit more, to see how close we might get to what you want.
But the concept is to put an :after or :before, or an absolutely positioned "overlay" and be able to click to boxes behind.
CSS
.selector {
width: 295px;
height: 100px;
overflow: hidden;
background-color: transparent;
position: relative;
}
.button1 {
float: left;
width: 32%;
height: 100%;
border: 1px solid white;
background-color: blue;
}
.selector:after {
content: '';
width: 300px;
height: 30px;
position: absolute;
top: 85px;
left: 0px;
transform: rotate(-3deg);
background-color: red;
}