CSS Menu - Keep parent hovered while focus on submenu - css

Question

I would like to keep the parent hover color the same when navigating the secondary menu.
I looked at a few other answers such as here and here, but I was unable to figure it out.
Here is a video explaining what I would like to accomplish: http://screencast.com/t/Bhfj6mtZkPZp
Here is the navigation code:
.primary-navigation {
max-width: 1192px;
margin: 20px 0px 52px 1px;
}
.primary-navigation ul {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
margin: 0;
padding: 0;
list-style: none;
}
.primary-navigation ul li {
display: block;
position: relative;
float: left;
}
.primary-navigation li ul {
display: none;
}
.primary-navigation ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #ec6397;
padding: 12px 22px 17px 22px;
white-space: nowrap;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
border-right: 1px solid #f39cbd;
}
.primary-navigation ul li a:hover {
background: #f39cbd;
}
.primary-navigation li:hover ul {
display: block;
position: absolute;
border-top: 1px solid #f39cbd;
border-left: 1px solid #f39cbd;
}
.primary-navigation li:hover li {
float: none;
width: 300px;
z-index: 3;
border-bottom: 1px solid #f39cbd;
}
.primary-navigation li:hover a {
background: #ec6397;
}
.primary-navigation li:hover li a:hover {
background: #f39cbd;
color: #000;
}

Answer 1

You hould be able to change this
.primary-navigation ul li a:hover {
background: #f39cbd;
}
to this
.primary-navigation ul li:hover a {
background: #f39cbd;
}
This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.