css - 悬停时主菜单和子菜单的一些问题

Question

我的菜单有点问题。

参见:

http://marketing-für-immobilien.de/

当我将鼠标悬停在菜单上时，背景颜色变为蓝色，字体颜色变为白色。当我将鼠标悬停在子菜单上时，程序相同，但主菜单字体颜色变为蓝色。当我将鼠标悬停在子菜单上时，我找不到合适的 CSS 来保持主菜单的白色。

如果有人能帮帮我就好了

干杯 斯文

Answer 1

你有 2 个不同的 :hover 定义。
第一个在主菜单的 li 标签上。这会将 li 背景设置为蓝色。
第二个位于主菜单的 a 标签上。这会将主菜单的字体颜色设置为白色。

这是你的错误。如果将光标移动到子菜单，光标仍位于主菜单的 li 标签上，但不再位于 a 标签上。所以第二次悬停了。

添加到您的 CSS:

header.navbar nav > div > ul > li:hover {
    background-color: #004b96;
}

这个:

header.navbar nav > div > ul > li:hover a {
    color: #fff;
}

并删除:

header.navbar a:hover {
    color: #fff;
}