html - fiddley navigation - 无序列表和背景颜色中的无序列表

Question

我正在做一个导航，可以在这里看到:http://jsfiddle.net/ybvF4/

我确信将两个问题合二为一是违反政策的，但我担心如果我这样做，解决方案可能无法协同工作。

我想实现的两件事是:

1. 当下拉菜单悬停时，我希望标题行元素(“sui generis”和“reclaimed wood”)具有绿色背景，就像它们现在所做的那样，但会填充到实体的高度围绕导航的轮廓。
2. 悬停时，我希望标题列表项元素中的文本为白色，而不会失去列表中子行项当前灰色悬停状态的效果。

我希望我已经说清楚了，用文本描述非常棘手，请查看 jsfiddle 链接

谢谢你的帮助

Answer 1

when the drop down menu is hovered I'd like the title line items ("sui generis" and "reclaimed wood") to have a green background, as they do now, but that fills up to the height of the solid outline that surrounds the navigation.

删除这个:

nav .navigation {
    padding-bottom: 5px;
    padding-top: 5px;
}

然后，在 .navigation li a 上, 添加 display: block允许 padding: 5px;按预期工作。

http://jsfiddle.net/thirtydot/ybvF4/1/

When hovered I'd like the text in the title list item elements to be white, without losing the effect of the current gray color hover state of the sub line items in the list.

添加这个:

.navigation > li:hover > a {
    color: #fff;
}

http://jsfiddle.net/thirtydot/ybvF4/3/

当然，没有子菜单的菜单项在悬停时具有白色背景和白色文本。由于您的 CSS 中的最后一条规则，我认为这是故意的。