html - 子菜单打开 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

您正在使用 :hover <a> 上的选择器这意味着当光标移动到 <ul> 上时<a> 中的文字不再是 hovered . <ul>仍然是其父级的一部分 <li>虽然如此改变:

nav > ul > li > a:hover {

到

nav > ul > li:hover {

这是一个更新的 fiddle :https://jsfiddle.net/nc5yqah9/2/