fiddey导航-无序列表和背景颜色中的无序列表

Question

我正在进行导航，可以在这里看到：http://jsfiddle.net/ybvF4/

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

我想实现的两件事是：

1. 当下拉菜单悬停时，我希望标题行项目（"特殊"one_answers"再生木材"）有一个绿色背景，就像现在一样，但它会填充到导航周围的实心轮廓的高度
2. 悬停时，我希望标题列表项元素中的文本为白色，而不会失去列表中子行项的当前灰色悬停状态的效果

我希望我已经明确了这一点——在文本中描述它非常棘手，请参阅jsfiddle链接

感谢您的帮助

Answer 1

当下拉菜单悬停时，我想要标题行项目（"suigenerais"one_answers"再生木材"），就像它们一样，具有绿色背景现在，但是填充到实心轮廓的高度环绕导航。

删除此：

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

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

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

悬停时，我希望标题列表项元素中的文本为白色，不会失去当前灰色悬停状态的效果列表中子行项目的。

添加此：

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

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

当然，没有子菜单的菜单项会有白色背景和悬停的白色文本。我认为这是有意的，因为CSS中的最后一条规则。