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

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 将保留菜单 1 上的 #333 彩色文本。

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

Answer 1

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

#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>