Jquery .prepend和.append的悬停颜色；“家长”；“的要素”；“儿童”；要素

您好，我正在处理此菜单运行代码段：）

我的问题是我无法让下拉箭头：悬停颜色按我的意愿工作。 前任。 如果我将鼠标悬停在->“1b级”->“1b级”->“1b级” 然后，“1b级”、“1b级”上的箭头应为白色，其余为黑色

谁能帮帮我吗

/*
*添加主题功能
*/
jQuery（文档）.ready（函数（$）{
$（'a[target=“_blank”]”）。addClass（“target blank”）；
$（'.top导航a，.main导航a'）。前置（“”）；
$（'.top导航a、.main导航a'）。追加（“”）；
});
nav{
背景：蓝色；
边缘顶部5px；
}
/*菜单放置*/
#站点导航容器{
文本对齐：居中；
}
#现场导航集装箱，#现场导航集装箱ul{
z指数：10；
}
#站点导航{
显示：内联块；
}
#站点导航li{
线高：1；
文本对齐：左对齐；
}
/*盘旋*/
.main navigation ul li：悬停，.main navigation ul li.current-menu-item，.main navigation ul li.current-page-item{
边框顶部：2件纯白；
}
.main navigation ul li:hover、.main navigation ul li.current-menu-item、.main navigation ul li.current-page-sector{
边框顶部：0px；
左边框：2倍纯白；
}
.main导航ul li:hover#after，.main导航ul li:hover#after{
颜色：白色；
}
.主导航{
显示：无；
}
.主导航ul li:悬停>ul{
显示：块；
}
/*一级*/
.主导航{
列表样式：无；
保证金：0；
左侧填充：0；
显示：内联表；
位置：相对位置；
}
.主导航ul li{
浮动：左；
边框顶部：2件纯蓝；
}
.主导航ul li a{
显示：块；
利润率：5x10px；
颜色：黑色；
文字装饰：无；
/*内联框对齐：初始*/
空白：nowrap；
}
.main导航。菜单项具有子项>a#after:after{
字体系列：Fontsome；
内容：“\f13a”；
左侧填充：5px；
}
.主导航#目标空白{
显示器：flex；
}
/*二级*/
.主导航{
背景：蓝色；
位置：绝对位置；
最高：100%；
}
.主导航ulli{
浮动：无；
位置：相对位置；
左边框：2倍纯蓝色；
左边距：5px；
边框顶部：0px；
}
.主导航ul li a{
颜色：黑色；
保证金：0；
填充物：5px；
左：3倍；
}
.main navigation ul li.菜单项具有子项>a#after:after{
字体系列：Fontsome；
内容：“\f138”；
}
/*二级以上*/
.主导航{
位置：绝对位置；
左：100%；
排名：0；
}
.目标空白：之后{
字体系列：Fontsome；
内容：“\f08e”；
字体大小：70%；
颜色：白色；
左侧填充：5px；
}
.顶部导航#目标空白{
显示器：flex；
}































您错过了父选择器（
），因此将鼠标悬停在第一个li上，将使导航系统内的每个
#之后的
都进行更改

删除当前关于
li:hover
的CSS，并添加以下1行代码：

#primary-menu > li:hover > a > #after, #primary-menu > li > ul > li:hover > a > #after  {
    color: white;
}


选择父元素是id为主菜单的元素的所有

#primary-menu > li:hover > a > #after { /*somecss*/ }

选择具有父级
和父级
且ID在
之后的所有元素：hover（仅当此li处于悬停状态时应用
/*somecss*/
）

如需进一步参考，请检查
更新一些Css及其对我的作用

.main-navigation ul > li:hover #after{
    color: white;
}
.main-navigation ul > li:hover .sub-menu #after{
    color: black;
}
.main-navigation ul > li:hover .sub-menu li:hover #after{
    color: white;
}
.main-navigation ul ul {
    display: none;
}

“其余”是其他菜单项中的箭头吗？因为看起来效果不错。你问的是如何只改变箭头的颜色？不包括菜单项的颜色？它将像菜单项左上方的宽边框一样，因此如果我将鼠标悬停在菜单项“Level 1b”上。然后菜单项“Level 1b 2a”和“Level 1b 2c”上的箭头必须保持黑色，而不是现在的白色。请参见下面回答中的注释中的图片。我已经查看了您的JSFIDLE。它仍然没有真正发挥我想要的作用。也许我不好解释我想要什么我画了一张我理解的图片
.main-navigation ul > li:hover #after{
    color: white;
}
.main-navigation ul > li:hover .sub-menu #after{
    color: black;
}
.main-navigation ul > li:hover .sub-menu li:hover #after{
    color: white;
}
.main-navigation ul ul {
    display: none;
}