活动菜单链接应该“裁剪”菜单条？

Question

我有一个奇怪的菜单来编码，我不知道该怎么做，我有这个100％宽的标题条，左侧徽标位于右侧菜单。该带走过全屏幕背景。所以，我需要主动链接以某种方式裁剪标题条，就像打个洞一样。我附上了一张图片，以便您可以获得更好的想法。谢谢 ！

以下是图像：

http://oi49.tinypic.com/166zvo0.jpg

Answer 1

使用背景透明度

HTML

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

CSS

body{ 
background:url(http://2.bp.blogspot.com/-C4Py3QDewmA/Td8HQzGhbcI/AAAAAAAAALU/BeVowacOJiA/s320/brick_wall.jpg) left top 
} 
li{ 
    display:inline-block; 
    padding:10px; 
    border:1px solid black; 
    float:left; 
    background: rgba(255,255,255,0.60); 
} 
li:hover{ 
    background:none 
} 
a{ 
    color:white; font-weight:bold; 
    text-decoration:none 
} 

DEMO