ナビゲーションハイパーリンクは、マウスがテキスト上にあるときのみ機能します

Question

私の上にマウスを置くと、ナビゲーションボタンが異なって見えます。私は、ボタンやテキスト上にあるかどうかにかかわらず、ユーザーのリダイレクトを希望します。何が間違っていますか？ここで

は、ボタンのCSSです：

.navButton { 
    -moz-box-shadow: inset 0px 1px 0px 0px #916e50; 
    -webkit-box-shadow: inset 0px 1px 0px 0px #916e50; 
    box-shadow: inset 0px 1px 0px 0px #916e50; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c79e75), color-stop(1, #785634)); 
    background: -moz-linear-gradient(center top, #c79e75 5%, #785634 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c79e75', endColorstr='#785634'); 
    background-color: #c79e75; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    border: 1px solid #634b36; 
    display: inline-block; 
    color: #ffffff; 
    font-family: arial; 
    font-size: 15px; 
    font-weight: bold; 
    padding: 6px 0px; 
    text-decoration: none; 
    text-shadow: 1px 1px 0px #705439; 
    text-align: center; 
} 
.navButton:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #785634), color-stop(1, #c79e75)); 
    background:-moz-linear-gradient(center top, #785634 5%, #c79e75 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#785634', endColorstr='#c79e75'); 
    background-color:#785634; 
}.navButton:active { 
    position:relative; 
    top:1px; 
} 

、ここではhtmlです：

<div id="nav"> 
     <ul> 
      <li class="navButton"> 
      <a href="index.php">Home</a></li> 
      <li class="navButton"> 
      <a href="guitar_bodies.php?page=1">Guitar 
      Bodies</a></li> 
      <li class="navButton"> 
      <a href="guitar_pickguards.php?page=1">Guitar 
      Pickguards</a></li> 
      <li class="navButton"> 
      <a href="contact_us.php">Contact Us</a></li> 
     </ul> 
     </div> 

おかげ

Answer 1

ものはハイパーリンクされている（だけでなく、彼らのインライン配置のため.navButtonにdisplay: inline-blockを保つ）としてあなたが代わりに.navButton aにこれらのスタイルを適用する必要があります

.navButton { 
    display: inline-block; 
} 

.navButton a { 
    /* ... */ 

    display: block; /* Replace inline-block with block */ 

    /* ... */ 
} 

.navButton a:hover { 
    /* ... */ 
} 

.navButton a:active { 
    /* ... */ 
} 

Answer 2

はちょうどあなたの.navButton:hoverクラス にcursor:pointerを追加ここで更新フィドルです： http://jsfiddle.net/mrchief/7SV5K/

これはあなたのスタイルの問題を解決します。ただし、ボタンをクリックするにはliのハンドブックをclickに添付する必要があります。