EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
<a href="/"></a> // the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..