css - menus - menu fijo con scroll y detector de ubicación

Menú CSS: mantener al padre suspendido mientras se enfoca en el submenú

Question

Me gustaría mantener el mismo color al pasar el mouse al navegar el menú secundario.

Miré algunas otras respuestas, como aquí y aquí , pero no pude resolverlo.

Aquí hay un video que explica lo que me gustaría lograr: http://screencast.com/t/Bhfj6mtZkPZp

Aquí está el código de navegación:

.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

Deberías poder cambiar esto

.primary-navigation ul li a:hover {
background: #f39cbd;
}

a esto

.primary-navigation ul li:hover a {
background: #f39cbd;
}

De esta forma, el color de su elemento de navegación principal cambia cuando pasa el cursor sobre el li padre. Dado que el submenú también debe estar dentro de este li, el desplazamiento se seguirá activando cuando se mueva sobre el submenú, por lo que el color del enlace también debe mantener su estado de vuelo estacionario.