您正在使用此菜单运行代码段：）
我的问题是我无法获得下拉箭头：将颜色悬停在我想要的地方。 防爆。 如果我将鼠标悬停在 - > “等级1b” - ＆gt; “等级1b 2b” - ＆gt; “等级1b 2b 3b” 然后“等级1b”，“等级1b 2b”上的箭头应为白色，其余为黑色
有人可以帮助我吗
https://jsfiddle.net/BugiBH/xLumg78x/
/*
* add theme-features
*/
jQuery(document).ready(function ($) {
$('a[target="_blank"]').addClass("target-blank");
$('.top-nav a, .main-navigation a').prepend("<div id='before' style='float: left;'></div>");
$('.top-nav a, .main-navigation a').append("<div id='after' style='float: right;'></div>");
});nav {
background: blue;
margin-top 5px;
}
/*Menu placering*/
#site-nav-container {
text-align: center;
}
#site-nav-container, #site-nav-container ul {
z-index: 10;
}
#site-navigation {
display: inline-block;
}
#site-navigation li {
line-height: 1;
text-align: left;
}
/*hover*/
.main-navigation ul li:hover, .main-navigation ul li.current-menu-item, .main-navigation ul li.current-page-ancestor {
border-top: 2px solid white;
}
.main-navigation ul ul li:hover, .main-navigation ul ul li.current-menu-item, .main-navigation ul ul li.current-page-ancestor {
border-top: 0px;
border-left: 2px solid white;
}
.main-navigation ul li:hover #after, .main-navigation ul ul li:hover #after {
color: white;
}
.main-navigation ul ul {
display: none;
}
.main-navigation ul li:hover > ul {
display: block;
}
/*level one*/
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-table;
position: relative;
}
.main-navigation ul li {
float: left;
border-top: 2px solid blue;
}
.main-navigation ul li a {
display: block;
margin: 5px 10px;
color: black;
text-decoration: none;
/*inline-box-align: initial;*/
white-space: nowrap;
}
.main-navigation .menu-item-has-children > a #after:after {
font-family: FontAwesome;
content:" \f13a";
padding-left: 5px;
}
.main-navigation #target-blank {
display: flex;
}
/*level two*/
.main-navigation ul ul {
background: blue;
position: absolute;
top: 100%;
}
.main-navigation ul ul li {
float: none;
position: relative;
border-left: 2px solid blue;
margin-left: 5px;
border-top: 0px;
}
.main-navigation ul ul li a {
color: black;
margin: 0;
padding: 5px;
padding-left: 3px;
}
.main-navigation ul li .menu-item-has-children > a #after:after {
font-family: FontAwesome;
content:" \f138";
}
/*level higher than two*/
.main-navigation ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.target-blank:after {
font-family: FontAwesome;
content:" \f08e ";
font-size: 70%;
color: white;
padding-left: 5px;
}
.top-nav #target-blank {
display: flex;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-top-menu-container">
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729"> <a target="_blank" href="#" class="target-blank">Level 1a</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1733"> <a href="#">Level 1b</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1765"> <a target="_blank" href="#" class="target-blank">Level 1b 2a</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1766"> <a target="_blank" href="#" class="target-blank">Level 1b 2a 3a</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1730"> <a target="_blank" href="#" class="target-blank">Level 1b 2b</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1751"> <a target="_blank" href="#" class="target-blank">Level 1b 2b 3a</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1753"> <a target="_blank" href="#" class="target-blank">Level 1b 2b 3b</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1762">
<a target="_blank" href="#" class="target-blank">Level 1b 2c</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1728"> <a target="_blank" href="#" class="target-blank">Level 1c</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1732"> <a target="_blank" href="#" class="target-blank">level 1c 1a </a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
答案 0 :(得分：1)
您错过了父选择器（>），因此将第一个li移动，会使导航中的每个#after都进行更改。
删除关于li:hover的当前CSS并添加此1-liner：
#primary-menu > li:hover > a > #after, #primary-menu > li > ul > li:hover > a > #after {
color: white;
}
#primary-menu > li
选择所有＆lt; li＆gt; s其中父项是ID为#primary-menu
#primary-menu > li:hover > a > #after { /*somecss*/ }
选择标识为#after且父< a >父父< li >}的所有元素：悬停（仅当此时才应用/*somecss*/正在徘徊）
有关进一步参考，请查看CSS Selectors
答案 1 :(得分：0)
更新一些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;
}