为什么显示：块没有做我期望的导航项目？

Question

我在这个站点上有一个导航菜单：http://blog.helpcurenow.org/test/redesignMockup/其中我已经设置了列表项锚点以显示：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; 
}