我正在构建一个导航,其中包含无序列表中的无序列表。我怀疑主要无序列表的样式与子列表的样式混淆,反之亦然。也许我的选择者不是最好的。导航可以在这里看到:http://jsfiddle.net/W3Dzd/
我遇到的两个问题是:1)“sui generis”下的第一个项目比其他项目更薄 - 该框的矩形显示不同。 2)当悬停时,子导航行项目“mantels”锚文本,也在“sui generis”下,在悬停时不会改变颜色。
有人能指出我正确的方向吗?有没有更好的选择器?
答案 0 :(得分:1)
第一个问题来自规则:
.subnav li:first-child > a {
padding-bottom: 2.5px;
}
我不明白其目的,但删除它可以解决问题。
第二个问题来自这条规则:
.navigation li:first-child + li + li:hover > a, .navigation li:first-child + li + li + li + li + li + li:hover > a {
color: white;
}
它使“mantels”文本保持白色,因为规则指定任何a
,它是li
的直接子项,它正在盘旋,并且是第三次或第七次连续{{ 1}},其中某个祖先,不一定是父,具有类li
。现在,在navigation
后>
修复问题,但我会建议另一种方法:
不要将.navigation
放在顶级ul
类中,而是将该类放在li
本身上。那么你可以拥有更简单的规则
li
希望这有帮助!哦,我也会考虑使用边框来做subnav项目之间的分隔符而不是背景图像。