Question

我有一个横向菜单链接。如果我从下面鼠标悬停链接，它们的行为完全正常，整个链接都可以点击它。但是，如果我从上方或侧面接近鼠标，则直到我的鼠标到达链接的底部（链接文本下方）之前，该链接根本无法点击...但是一旦我将鼠标移到底部，整个链接可以再次点击。这是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%;

}

Answer 1

我弄清楚问题是什么。我从横幅中删除了高度值，并添加了一个边距底部来推动菜单。

链接无法点击，直到我将鼠标悬停在其底部

1 个答案: