0

我有一个水平的链接菜单。如果我将鼠标悬停在下面的链接上，它们的行为完全正常，并且整个链接都可以点击，就像它应该的那样。但是，如果我将鼠标悬停从上方或侧面接近，则链接根本不可点击，直到我的鼠标到达链接底部（链接文本下方）......但是一旦我将鼠标悬停在底部，整个链接可以再次点击。这是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;
  }

任何有关如何解决此问题的建议将不胜感激！

[编辑] 菜单前的唯一代码如下：

  <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%;

}

4

1 回答 1

0

我弄清楚了问题所在。我从横幅中删除了高度值并添加了一个边距底部以将菜单向下推。

于 2013-10-03T15:21:24.943 回答