css - Hovereffect of button overlaps part of logo

Question

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..

Answer 1

添加z-index:10到h1#logo，而不仅仅是在a标签里面。