主菜单的不同悬停颜色答案

【问题标题】：Different Hover colors for main menu主菜单的不同悬停颜色
【发布时间】：2014-07-26 08:41:49
【问题描述】：

我在这个网站上工作 MY Site 。菜单栏在悬停时显示黑色。我需要在每个菜单项悬停时显示不同的颜色。我在我的 css 中尝试了以下代码，但没有用

nav.main_menu>ul>li:hover>a span:nth-of-type(1){background-color:#161f30 !important;}     nav.main_menu>ul>li:hover>a span:nth-of-type(2){background-color:#161f30 !important;}

我也试过了

nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}

这也没有用。谁能帮我实现这个目标？请！！谢谢！！

【问题讨论】：

标签： wordpress css

【解决方案1】：

试试这个css

    nav.main_menu > ul > li:nth-child(1):hover {
    background:#ff0000 !important;
}
nav.main_menu > ul > li:nth-child(2):hover {
    background:#ff00ff !important;
}
nav.main_menu > ul > li:nth-child(3):hover {
    background:#ff0ff0 !important;
}
nav.main_menu > ul > li:nth-child(4):hover {
    background:#ff0aa0 !important;
}
nav.main_menu > ul > li:nth-child(5):hover {
    background:#ff0eee !important;
}
nav.main_menu > ul > li:nth-child(6):hover {
    background:#ff0dd0 !important;
}

【讨论】：

这可行，但尽量避免 !important ，这在 IE9 等旧版浏览器中不起作用。使用类时性能会更好，

【解决方案2】：

试试下面的

.main_menu > ul > li:nth-child(1):hover > a span {
    // styles
}

最好将类添加到您的导航元素。

.main_menu-home { // styles }
.main_menu-artists { // styles }

等等

【讨论】：