Question

My navigation button looks different when I mouse over, as it should, though the pointer cursor does not appear until I mouse over the text which is not what I want. I want the user to be redirected regardless of whether they are on the button or its text. What could be wrong?

Here is the CSS for the button:

.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;
}

and here is the 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>

Thanks

Answer 1

You should apply these styles to .navButton a instead as those are the hyperlinks (but also keep display: inline-block on .navButton for their inline arrangement):

.navButton {
    display: inline-block;
}

.navButton a {
    /* ... */

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

    /* ... */
}

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

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