Ссылка не кликабельна, пока я не наведу курсор на нижнюю часть

У меня есть горизонтальное меню ссылок. Если я навешиваю ссылки снизу, они действуют абсолютно нормально, и вся ссылка доступна только так, как должно быть. Тем не менее, если я нахожу указатель мыши сверху или сбоку, ссылка вообще не может быть нажата, пока моя мышь не достигнет нижней части ссылки (ниже текста ссылки)... но как только я замалчиваю нижнюю часть, вся ссылка снова активируется. Здесь html:

<div id="menu">
<a class="menBtn"href="/news.php">NEWS</a>
<a class="menBtn"href="/photos.php">PHOTOS</a>
<a class="menBtn"href="/give.php">ABOUT</a>
<a class="menBtn"href="/give.php">GIVE</a> 
</div>

и здесь css:

#menu {
  width:100%;
  text-align:center;
  }

.menBtn {
  padding:.25em .5em;
  background:rgba(0,0,0,.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  font-size:30px;
  color:#c1c3c2;
  }

.menBtn:hover {
  opacity:.75;
  }

Любые советы о том, как исправить это, будем очень благодарны!

[EDIT] Единственный код перед меню:

  <div id="banner">
    <span id="header">A TITLE</span>     
  </div>

#banner {
  text-align:center;
  width:100%;
  position:relative;
  height:100px;
  top:25px;
  }

#header {
  background:rgba(0,0,0,.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size:40px;
  color:#bdbb94;
  padding:0.25em 0.5em;
  width:30%;

}