CSS3 Flip下拉菜单-将鼠标悬停在子菜单上时保留主菜单悬停样式

Question

Here's the fiddle for my query

https://jsfiddle.net/e7te8hf1/

<section id="action-bar">
<div id="logo">
<a href="#"><img src="img/logo.png"></a>
</div><!-- end logo -->

<nav class="navbar navigation main-navigation">
<ul class='menu main-menu'>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Women'>Women</span>
</a>
<ul>
<li>
<a href="casuals.html">Casuals</a>
<ul>
<li><a href="tops.html">Tops</a></li>
<li><a href="bottoms.html">Bottoms</a></li>
<li><a href="suits.html">Suits</a></li>
<li><a href="jumpsuits.html">Jumpsuits</a></li>
</ul>
</li>
<li><a href="formals.html">Formals</a></li>
<li>
<a href="prints.html">Prints</a>
<ul>
<li><a href="stitched.html">Stitched</a></li>
</ul>
</li>
<li><a href="anokhee.html">Anokhee</a></li>
<li><a href="abbayas.html">Abbayas</a></li>
<li>
<a href="accessories.html">Accessories</a>
<ul>
<li><a href="bags.html">Bags</a></li>
<li><a href="pouch.html">Pouch</a></li>
<li><a href="dupatta.html">Dupatta</a></li>
<li><a href="stole.html">Stole</a></li>
<li><a href="clutches.html">Clutches</a></li>
</ul>
</li>
</ul>
</li>
<li class='menu-item'>
<a href="#" class="three-d">
<span title='Men'>Men</span>
</a>
<ul>
<li>
<a href="casual.html">Casual</a>
<ul>
<li><a href="tops.html">Tops</a></li>
<li><a href="bottoms.html">Bottoms</a></li>
<li><a href="suits.html">Suits</a></li>
</ul>
</li>
<li><a href="formal.html">Formal</a></li>
</ul>
</li>
<li class='menu-item'><a href="#" class="three-d"><span title='Look Book'>Look Book</span></a></li>
<li class='menu-item'><a href="#" class="three-d"><span title='Stores'>Stores</span></a></li>
<li class='menu-item'><a href="#" class="three-d"><span title='Contact'>Contact</span></a></li>                         
</ul>
</nav>
</section>

and the CSS is

#action-bar .navbar {
    float: left;
}
#action-bar nav ul ul {
    display: none;
}
#action-bar nav ul li:hover > ul {
    display: block;
}
#action-bar nav ul {
    background: #fff;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-table;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-family:'Oswald', sans-serif;
    font-weight: bold;
}
#action-bar nav ul:after {
    content:"";
    clear: both;
    display: block;
}
#action-bar nav ul li {
    float: left;
}
#action-bar nav ul li:hover {
    background: #6f100d;
}
#action-bar nav ul li a {
    display: block;
    color: #757575;
    text-decoration: none;
    border-right: 1px solid #E5E5E6;
    border-bottom: 1px solid #E5E5E6;
    transition: .8s background-color;
}
#action-bar nav ul li a:hover {
    color: #fff;
}
#action-bar nav ul ul {
    background: #fff;
    padding: 0;
    position: absolute;
    top: 100%;
}
#action-bar nav ul ul li a {
    color: black;
}
#action-bar nav ul ul li {
    float: none;
    position: relative;
}
#action-bar nav ul ul li a {
    padding: 15px 40px;
    color: black;
}
#action-bar nav ul ul li a:hover {
    background: #6ABED6;
    color: #fff;
}
#action-bar nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}
#action-bar nav ul li:hover > a {
    color: #fff;
}
#action-bar #view-cart {
    float: right;
    display: inline-block;
    padding-top: 18px;
    padding-left: 5px;
}
#action-bar #user-menu {
    display: inline-block;
    padding-left: 160px;
}
.menu .menu-item {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.main-menu .menu-item a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-family:'Oswald:500', Arial, sans-serif;
    font-smoothing: antialiased;
    text-transform: uppercase;
    overflow: visible;
    background: #fff;
}
.three-d span, .three-d span::before, .three-d span::after {
    display: block;
    transition: all .3s ease-out;
    transform-style: preserve-3d;
}
.three-d {
    position: relative;
    cursor: pointer;
    transition: all .07s linear;
}
.three-d span {
    display: block;
    padding: 18px 35px;
    perspective: -200px;
}
.three-d span::before, .three-d span::after {
    padding: 18px 35px;
    content: attr(title);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
}
.three-d span::before {
    transform: rotateX(0deg) translateZ(25px);
}
.three-d span::after {
    transform: rotateX(-90deg) translateZ(25px);
    background: #6f100d;
    color: #f9f9f9;
}
.three-d:hover span, .three-d:focus span {
    transform: translateZ(-25px) rotateX(90deg);
}

I want the main-menu to retain the hover style when I hover over the sub-menu, using CSS, but I am unable to achieve that.

Can anyone please help?

Answer 1

Change the last block of CSS...

.three-d:hover span, .three-d:focus span {
    transform: translateZ(-25px) rotateX(90deg);
}

to this...

li:hover .three-d span, .three-d:focus span {
    transform: translateZ(-25px) rotateX(90deg);
}

and change the rest of your a:hover { selectors to li:hover > a {

JSFIDDLE