为什么 display:block 没有按照我对导航项目的预期执行操作？

Question

我在此网站上有一个导航菜单： http://blog.helpcurenow.org/test/redesignMockup/ 我已将列表项锚点设置为 display:block，并定义了与整个包含元素匹配的高度和宽度，但只有文本是可单击的。有什么想法为什么整个选项卡不可点击吗？

以下是我为链接编写的 CSS 规则：

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

关于为什么整个导航选项卡不是链接，而只是单词，有什么想法吗？

谢谢。

Answer 1

根据 Firebug，您将链接设置为 display: inline，并使用 !important 标记，该标记将覆盖您将其设置为阻止的任何其他位置。

换句话说，删除此代码：

.navItem {
    display: inline !important;
}