サブメニューを開いたときにメインナビゲーションがアクティブになるCSS

Question

メインメニューをアクティブにしようとしています（背景色は同じサブメニューの背景色です）ので、サブメニューを開くとメインメニューの色がアクティブになります。 、誰も私のCSSで何が間違って見てくださいできますか？

JSfiddle demo

nav { 
 
float: left; 
 
width: 100%; 
 
background: #6c9d1c; 
 
border-bottom: 5px solid #e57817; 
 
font-family: 'MyriadPro-Regular'; 
 
} 
 
nav > ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
font-size: 0; 
 
text-align: center; 
 
} 
 
nav > ul > li { 
 
list-style: none; 
 
padding: 0; 
 
margin: 0; 
 
position: relative; 
 
display: inline-block; 
 
} 
 
nav > ul > li > a { 
 
color: #fff; 
 
text-decoration: none; 
 
font-size: 16px; 
 
text-transform: uppercase; 
 
padding: 7px 17px 3px 17px; 
 
font-weight: 700; 
 
display: block; 
 
line-height: normal; 
 
} 
 
nav > ul > li > a:hover { 
 
background-color: #e57817; 
 
color: #fff; 
 
text-decoration: none; 
 
} 
 
nav > ul > li > ul { 
 
list-style: none; 
 
padding: 0; 
 
margin: 0; 
 
display: none; 
 
position: absolute; 
 
left: 0; 
 
top: 30px; 
 
width: 100%; 
 
text-align: left; 
 
} 
 
nav > ul > li:hover ul { 
 
display: block; 
 
} 
 
/*main menu active on submenu open*/ 
 
nav > ul > li > ul > li > a:hover nav > ul > li > a:hover { 
 
background-color: #e57817; 
 
} 
 
/*Submenu*/ 
 
nav > ul > li > ul > li { 
 
padding: 0; 
 
margin: 0; 
 
list-style: none; 
 
display: block; 
 
} 
 
nav > ul > li > ul > li > a { 
 
display: block; 
 
background: #e57817; 
 
color: #fff; 
 
font-size: 14px; 
 
font-family: Arial; 
 
border-bottom: 1px solid #fcb65a; 
 
padding: 8px 20px; 
 
} 
 
nav > ul > li > ul > li > a:hover { 
 
background-color: #fcb65a; 
 
color: #fff; 
 
text-decoration: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="corporate-training/">Main Menu</a> 
 
     <ul> 
 
     <li><a href="corporate-training/">Submenu one</a></li> 
 
     <li><a href="soft-skills-training/">Sub Menu Two</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

カーソルが<ul>上を移動すると<a>内のテキストは、もはやhoveredであることを意味しない<a>に:hoverセレクタを使用しています。その変更かかわら<ul>はまだその親<li>の一部です：

nav > ul > li > a:hover { 

nav > ul > li:hover { 

にここで更新フィドルだ：私はそれ李作ることを考えていたhttps://jsfiddle.net/nc5yqah9/2/