Navigation hyperlinks only work when mouse is on the text

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

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 {
    /* ... */
}

Answer 2

Just add cursor:pointer to your .navButton:hover class Here's an updated fiddle: http://jsfiddle.net/mrchief/7SV5K/

This will solve your style issue. However, for button click to happen, you need attach a click handler for the li too.