订单项行为不同

时间:2012-01-13 14:50:28

标签: html css navigation html-lists

我正在构建一个导航,其中包含无序列表中的无序列表。我怀疑主要无序列表的样式与子列表的样式混淆,反之亦然。也许我的选择者不是最好的。导航可以在这里看到:http://jsfiddle.net/W3Dzd/

我遇到的两个问题是:1)“sui generis”下的第一个项目比其他项目更薄 - 该框的矩形显示不同。 2)当悬停时,子导航行项目“mantels”锚文本,也在“sui generis”下,在悬停时不会改变颜色。

有人能指出我正确的方向吗?有没有更好的选择器?

1 个答案:

答案 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项目之间的分隔符而不是背景图像。