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

【问题标题】：Active menu link should "crop" the menu strip?活动菜单链接应该“裁剪”菜单条吗？
【发布时间】：2015-12-07 09:45:11
【问题描述】：

我有一个奇怪的菜单要编码，但我不知道该怎么做，我有这个 100% 宽的标题条，左侧是徽标，右侧是菜单。条带越过全屏背景。所以，我需要活动链接以某种方式裁剪标题条，比如打一个洞。我附上了一张图片，以便您获得更好的主意。谢谢！

图片如下：

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

【问题讨论】：

标签： html css menu

【解决方案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

【讨论】：