使用 CSS 和 HTML5 使下拉悬停菜单上的属性正常工作答案

【问题标题】：Getting properties on a drop down hover menu working correctly using CSS and HTML5使用 CSS 和 HTML5 使下拉悬停菜单上的属性正常工作
【发布时间】：2014-07-14 21:13:08
【问题描述】：

所以我对 CSS 和 HTML 还很陌生，我正在努力让这个下拉悬停菜单正常工作。

Here's a link to the fiddle

在链接 3 下，有一个带有链接的子菜单。我希望这样当用户将鼠标悬停在其中一个子链接上时，父链接（链接 3）的背景颜色保持突出显示，而不是逐渐变回蓝色。这是我用来在悬停期间突出显示每个链接的 CSS。

 #menu a:hover, #menu .current_page_item a 
    {
        text-decoration: none;
        background:#d4728b;
    }

此代码还可以使悬停的当前链接突出显示，但我希望当光标悬停在菜单中的另一个链接上时，current_page 突出显示将转移到该链接而不是一次突出显示两个链接。任何帮助，将不胜感激。

【问题讨论】：

标签： css drop-down-menu menu hover submenu

【解决方案1】：

设置您的 li 以更改与锚点相反的颜色。

#menu li:hover {
    text-decoration: none;
    background:#d4728b;
}

粗略的小提琴：http://jsfiddle.net/6xLqU/19/

【讨论】：

有没有办法让高亮只能应用于一个菜单链接？ current_page_item 类突出显示当前链接的任何内容，但是有没有办法让当我将鼠标悬停在链接 2 上时，链接 1 的突出显示会消失？
我真正知道的唯一方法是使用一些 jQuery。否则使用稍微不同的颜色来表示 current_page：jsfiddle.net/6xLqU/24
这可能是最简单的解决方案。非常感谢！
不客气。请为您的问题选择一个答案并祝您编码愉快！

【解决方案2】：

您可以将悬停选择器添加到列表而不是锚点。这是有效的，因为子菜单是 li 的子菜单，而不是锚点。

#menu li:hover a{
    background:#d4728b;
}

【讨论】：