订单项行为不同

Question

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

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

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

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