Why is display:block not doing what I expect on my nav items?

Question

I have a navigation menu on this site: http://blog.helpcurenow.org/test/redesignMockup/ where I have set the list item anchors to display:block, and defined a height and width that matches the entire containing element, but only the text is clickable. Any ideas why the whole tab is not clickable?

Here's the CSS rules I have written for the links:

#nav {
 width:auto;
 height:60px;
 list-style:none;
 float:right;
}
#nav li.mainNavItem {
 float:left;
 width:91px;
 height:60px;
 text-align:center;
 margin:0px 5px;
 position:relative;
}
#nav li.mainNavItem a:link, #nav li.mainNavItem a:visited {
 color:#4e4439;
 font: bold 14px Tahoma, Arial, sans-serif;
 text-decoration:none;
 word-spacing:-1px;
 line-height:60px;
 vertical-align:middle;
 display:block;
 width:91px;
 height:60px;
 text-shadow:#ffffff 0px 1px 0px;
}
#nav li.mainNavItem a:hover {
 color:#85bf46; 
}
#nav-about, #nav-hospitals, #nav-media, #nav-help-now, #nav-sponsor {

}
#nav-about:hover, #nav-hospitals:hover, #nav-media:hover, #nav-help-now:hover, #nav-sponsor:hover {
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px 0px no-repeat;
}
/* - optional rule for on:click bg effect --
#nav-about:active, #nav-hospitals:active, #nav-media:active, #nav-help-now:active, #nav-sponsor:active {
 background:url(../img/navBgSprite.png) center -120px no-repeat;
 color:#ffffff;
 text-shadow:none;
}
*/
li#nav-donate.mainNavItem  a:link, li#nav-donate.mainNavItem  a:visited {
 height:47px;
 color:#ffffff;
 font-size:19px;
 letter-spacing:0px;
 line-height:17px;
 padding-top:13px;
 text-shadow:none;
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -60px no-repeat;
}
li#nav-donate.mainNavItem a:hover {
 color:#046228;
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -180px no-repeat;
}

#nav li.current {
 background:url(http://blog.helpcurenow.org/test/redesignMockup/img/cure-sprite-main.png) 0px -120px no-repeat;
}
#nav li.current a:link, #nav li.current a:visited {
 color:#ffffff;
 text-shadow:#6e5e4c 0px 1px 0px;
}

Any ideas as to why the whole nav tab is not a link, only the word?

Thanks.

Answer 1

According to Firebug you are setting the link to display: inline, and with the !important tag, which will be overriding wherever else you set it to block.

In other words, remove this code:

.navItem {
    display: inline !important;
}