Активная ссылка меню должна «обрезать» полосу меню?

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