CSS3 flip Menu déroulant - Conservez le style de vol stationnaire menu principal lors du survol de sous-menu

voix
0

Voici le violon pour ma requête

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>

et le CSS est

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

Je veux que le menu principal de conserver le style de vol stationnaire quand je passe la souris sur le sous-menu, en utilisant CSS, mais je suis incapable d'y parvenir.

quelqu'un peut-il aider s'il vous plait?

Créé 25/06/2015 à 13:52
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
1

Modifier le dernier bloc de CSS ...

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

pour ça...

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

et changer le reste de vos a:hover {sélecteursli:hover > a {

jsFiddle

Créé 25/06/2015 à 14:04
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more