html5 - Active menu link should "crop" the menu strip? -
I have a strange menu for code and I do not know how to do this, let me get this 100% wide head bar The logo logo sits on the left side and the menu bar on the right goes to the fullscreen background, so, I need an active link to crop the header bar somehow, like a hole. I attached an image so that you can get a better idea. Thanks!
Here is the image:
Background opacity Use
HTML CSS
& lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
body {background: url (http://2.bp.blogspot.com/-C4Py3QDewmA/ Td8HQzGhbcI / AAAAAAAAALU / BeVowacOJiA / s320 / brick_wall.jpg) left on top} li {display: inline-block; Padding: 10px; Limit: 1px solid black; Swim left; Background: RGBA (255, 255, 255,0.60); } Li: hover {background: none} a {color: white; font-weight: bold; Text-decoration: none}
Comments
Post a Comment