HTML / CSS透明边框缩进，z-index

Question

将网址编码到网站，如下所示：

在＆＃34; People＆＃34;下创建5px缩进时遇到问题link，用于指示活动/当前页面。我知道如何＆＃34;假的＆＃34;这种效果通过使用背景图像/颜色等 - 但下面的内容在每个页面上会有所不同（有时是纯色，有时是示例中显示的背景图案，有时是照片）。因此缩进需要透明。

我假设我将使用z-index将此标题覆盖在下面的任何内容上。我们无法弄清楚如何在仅一个部分中获得透明缩进，而也使灰色菜单栏继续为100％浏览器宽度。我可能忽略了一些简单的事情。感谢。

编辑：在这里工作JSfiddle：http://jsfiddle.net/brandonpeat/mVSBj/14/

<div id="menu">
<div id="ombre">
    <div id="ombre1"></div>
    <div id="ombre2"></div>
    <div id="ombre3"></div>
    <div id="ombre4"></div>
    <div id="ombre5"></div>
</div>
<div class="container">
    <img src="http://asheragency.com/websites/asher2014/asher_logo.png" alt="Asher" id="asherLogo"/>
<ul>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>
</div>

Answer 1

不是很优雅，但这里有一个小提琴：http://jsfiddle.net/vlrprbttst/cke6U/1/

你无法生产5px＆＃34;孔＆＃34;在您的后台，我的解决方案需要li元素才能拥有背景（不是header或ul），因此可能不适合您

你基本上必须在height

上使用:hover

li {list-style:none;float:left;height:50px;line-height:50px;width:16.66666666666667%;text-align:center;position:relative;background:grey}

li:hover {height:45px}