Почему display:block не делает то, что я ожидаю от моих элементов навигации?

У меня есть меню навигации на этом сайте: 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;
}

Любые идеи относительно того, почему вся вкладка навигации не является ссылкой, а только словом?

Спасибо.


html css hover
person Joel Glovier    schedule 22.02.2010    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Согласно Firebug, вы устанавливаете ссылку на display: inline и с тегом !important, который будет переопределять везде, где вы установите его для блокировки.

Другими словами, удалите этот код:

.navItem {
    display: inline !important;
}
person DisgruntledGoat    schedule 22.02.2010
comment
Потрясающий. Спасибо! Я даже не знаю, почему это правило там. Я думаю, что это было связано с вспомогательной навигацией, но не похоже, что она сейчас что-то делает, кроме как испортить основную навигацию! - person Joel Glovier; 22.02.2010