html - 行为不同的订单项

Question

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

我遇到的两个问题是 1) “sui generis”下的第一行元素比其他元素更细 - 作为该框的矩形显示不同。 2) 悬停时，子导航行元素“mantels” anchor 文本，也在“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 上的直接子级，并且是第三个或第七个连续 li，它有 某个祖先，不一定是父级，他有 navigation 类。现在，在 .navigation 之后放置一个 > 可以解决这个问题，但我建议另一种选择:

不是给顶级 li 中的 ul 一个类，而是将该类放在 li 本身上。然后你可以有更简单的规则

.navigation li.has-subnav:hover {
    background: #80A353;
}
.navigation li.has-subnav:hover > a {
    color: white;
}

希望对您有所帮助!哦，我也会考虑只使用边框而不是背景图像来做子导航项之间的分隔符。