子菜单处于活动状态时，如何使菜单保持悬停状态？

Question

将鼠标悬停在子菜单上时，我需要在CSS中添加哪些内容才能使菜单文本保持黑色？

我尽可能地尝试了当前的：hover元素，包括>，并将其他代码的相关部分改编为CSS。我也梳理了类似的问题，希望找到适用的代码，但没有成功。

#menu {
  width: 100%;
  position: fixed; 
  background: #333;
  color: #fff;
}

#menu ul.left {
  position:relative;
	float:left;
	margin:0;
	padding:0px;
}

#menu ul a {
	display:block;
	color:#fff;
	text-decoration:none;
	padding:0 15px;
}

#menu ul a:hover {
	display:block;
	color: #333;
	text-decoration:none;
	padding:0 15px;
}

#menu ul li {
  list-style-type: none;
	position:relative;
	float:left;
	margin:0;
	padding:0px;
}

#menu ul li:hover {
  background:#f6f6f6;
  color:#333;
}

#menu ul ul {
	display:none;
	position:absolute;
  background: #f6f6f6;
  color: #333;
}

#menu ul li:hover > ul {
    display:block;
}

<nav id="menu">
      <ul class="left">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
          <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a>
          </ul>
        </li>
      </ul>
</nav>

预期结果：从菜单1悬停到子菜单x将使＃333彩色文本保留在菜单1上。

实际结果：从菜单1悬停到子菜单x将在菜单1上恢复为＃f6f6f6彩色文本。

Answer 1

在CSS的a中添加了#menu ul li:hover元素。

#menu {
  width: 100%;
  position: fixed; 
  background: #333;
  color: #fff;
}

#menu ul.left {
  position:relative;
	float:left;
	margin:0;
	padding:0px;
}

#menu ul a {
	display:block;
	color:#fff;
	text-decoration:none;
	padding:0 15px;
}

#menu ul a:hover {
	display:block;
	color: #333;
	text-decoration:none;
	padding:0 15px;
}

#menu ul li {
  list-style-type: none;
	position:relative;
	float:left;
	margin:0;
	padding:0px;
}

#menu ul li:hover a{
  background:#f6f6f6;
  color:#333;
}

#menu ul ul {
	display:none;
	position:absolute;
  background: #f6f6f6;
  color: #333;
}

#menu ul li:hover > ul {
    display:block;
}

<nav id="menu">
      <ul class="left">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
          <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a>
          </ul>
        </li>
      </ul>
</nav>