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

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

0 голосов
/ 22 февраля 2010

У меня есть меню навигации на этом сайте: http://blog.helpcurenow.org/test/redesignMockup/, где я установил привязки элемента списка для отображения: блок, и определил высоту и ширину, которые соответствуют всему содержащему элементу, но кликабелен только текст , Есть идеи, почему вся вкладка не кликабельна?

Вот правила 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;
}

Есть идеи, почему вся навигационная вкладка - это не ссылка, а только слово?

Спасибо.

1 Ответ

2 голосов
/ 22 февраля 2010

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

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

.navItem {
    display: inline !important;
}
...