링크를 클릭 할 때까지 링크를 클릭 할 수 없습니다.

Question

링크가 가로로 표시되어 있습니다. 아래에서 링크를 마우스로 이동하면 완전히 정상적으로 작동하고 전체 링크는 클릭 가능한 것처럼 클릭 할 수 있습니다. 그러나 마우스 오버가 위 또는 측면에서 접근하면 마우스가 링크의 아래쪽 (링크 텍스트 아래)에 도달 할 때까지 링크를 클릭 할 수 없습니다 ...하지만 일단 마우스를 바닥 위로 올리면, 전체 링크를 다시 클릭 할 수 있습니다.

<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의 : 다음은 HTML입니다

이

#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

나는 문제가 무엇인지 알아 냈어. 배너에서 높이 값을 제거하고 메뉴를 아래로 밀어내는 여백을 추가했습니다.