Pourquoi est-ce que display: block ne fait pas ce que j'attends sur mes objets nav?

Question

J'ai un menu de navigation sur ce site: http://blog.helpcurenow.org/test/redesignMockup/ où j'ai défini les ancres de l'élément de liste à afficher: block, et défini une hauteur et une largeur qui correspondent à l'élément contenant entier, mais seulement le texte est cliquable. Des idées pour lesquelles l'onglet entier n'est pas cliquable?

Voici les règles CSS j'ai écrit pour les liens:

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

Toutes les idées pour lesquelles l'onglet de navigation tout est pas un lien, seul le mot?

Merci.

Answer 1

Selon Firebug vous définissez le lien à display: inline et avec la balise !important, qui sera redéfinir partout où vous l'avez défini pour bloquer.

En d'autres termes, supprimer ce code:

.navItem { 
    display: inline !important; 
}