仅覆盖父图像的子元素

Question

我有一个菜单，我想要菜单项的活动状态和悬停状态。我的问题在这两个图像中最好地说明了。绿色背景颜色应该只覆盖深橙色区域（这是一个图像）。

这是我现在菜单：

而且这是我希望它是：

哪种方法是最好的削减绿色元素的底部得到这个效果？

中的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

我不知道这样的事情FIDDLE可能让你开始。

我会多花一点时间来看看我们可以接近你想要的东西。

但是，这个概念是把一个：之后或：之前，或绝对定位的“覆盖”，并能够点击框后面。

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; 
}