How do I make menu retain hover state when submenu is active? - html

Question

What do I need to include in my CSS to get my menu text to stay black when hovering over a submenu?
I've tried systematically going through my current :hover elements, including > when ever possible, and adapting the relevant parts from other codes into the CSS. I've also combed through similar questions in hopes to find applicable code but have not been successful.
#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>Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
</ul>
</nav>
Expected results: hovering from Menu 1 to Sub Menu x will keep the #333 colored text on Menu 1.
Actual results: hovering from Menu 1 to Sub Menu x will revert to #f6f6f6 colored text on Menu 1.

Answer 1

Added a element to the #menu ul li:hover in 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 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>Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
</ul>
</nav>