CSS3翻轉下拉菜單 - 懸停在子菜單時

Question

下面是我的查詢

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> 

小提琴和CSS是

#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); 
} 

我保留主菜單懸停風格使用CSS懸停在子菜單上時，希望主菜單保留懸停樣式，但我無法實現該功能。

任何人都可以請幫忙嗎？

Answer 1

更改CSS的最後一塊...

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

這個...

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

和你a:hover {選擇的其餘部分更改爲li:hover > a {

JSFIDDLE