2016-11-21 26 views
0

Ich habe ein Menü mit Submenü funktioniert gut, aber ich versuche, css Übergang im Untermenü hinzuzufügen, wenn ich mouseover auf zweiten nav Element, sollte das Untermenü, die von oben zu erscheinen Übergang unten, aber es funktioniert nicht, kann jemand bitte vorschlagen?CSS-Übergang funktioniert nicht auf Untermenü bei Hover

Hier ist die Arbeits JSfiddle

.header_right { 
 
float: right; 
 
width: 100%; 
 
min-height: 80px; 
 
line-height: 80px; 
 
} 
 
.header_right > ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
font-size: 0; 
 
text-align: right; 
 
} 
 
.header_right > ul > li { 
 
list-style: none; 
 
display: inline-block; 
 
background: #3275a6; 
 
padding: 8px 16px; 
 
color: #fff; 
 
-webkit-border-radius: 4px; 
 
border-radius: 4px; 
 
font-family: 'Montserrat', sans-serif; 
 
font-size: 15px; 
 
font-weight: 400; 
 
line-height: normal; 
 
vertical-align: middle; 
 
transition: all 0.3s ease 0s; 
 
cursor: pointer; 
 
position: relative; 
 
} 
 
.header_right > ul > li > a { 
 
color: #fff; 
 
text-decoration: none; 
 
} 
 
.header_right > ul > li:nth-child(1) { 
 
margin-right: 15px; 
 
cursor: default; 
 
} 
 
.header_right > ul > li:nth-child(1) > a { 
 
cursor: default; 
 
} 
 
.header_right > ul > li:hover { 
 
background: #14507d; 
 
} 
 
.header_right > ul > li.actbtn { 
 
background: #14507d; 
 
} 
 
.navigation-third { 
 
background: #14507d; 
 
border-radius: 0 0 4px 4px; 
 
display: none; 
 
list-style: outside none none; 
 
margin: 0; 
 
padding: 0; 
 
position: absolute; 
 
right: 0; 
 
top: 33px; 
 
width: 100%; 
 
-moz-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
 
-webkit-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
 
transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
 
} 
 
.navigation-third > li { 
 
list-style: outside none none; 
 
} 
 
.navigation-third > li > a { 
 
color: #fff; 
 
font-size: 14px; 
 
padding: 10px 12px; 
 
display: block; 
 
text-align: left; 
 
text-decoration: none; 
 
} 
 
.navigation-third > li > a:hover { 
 
background-color: #0076AA; 
 
} 
 
.navigation-third > li:nth-child(2) > a:hover { 
 
border-radius: 0 0 4px 4px; 
 
} 
 
.header_right > ul > li:nth-child(2):hover .navigation-third { 
 
display: block; 
 
}
<div class="header_right"> 
 
    <ul> 
 
    <li href="javascript:;"><i class="ico ico_location"></i> <a href="javascript:;">Delhi/NCR</a> </li> 
 
    <li> <a class="sub-3"><i class="fa fa-sign-in"></i>&nbsp; Welcome, User</a> 
 
     <ul class="navigation-third"> 
 
     <li><a href="javascript:;" class=""><i class="fa fa-cog" aria-hidden="true"></i> User Account</a></li> 
 
     <li><a href="javascript:;" class=""><i class="fa fa-sign-out"></i> Logout</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

+0

Um den gewünschten Effekt zu erhalten, sollten Sie eine andere Eigenschaft verwenden, height: https://jsfiddle.net/xwx5dwgd/4/ aber da Sie die genaue Höhe nicht kennen und nicht einstellen können (ich habe 74 px in Demo, und es funktioniert gut, weil feste Höhe eingestellt ist), vielleicht ist Jquery bessere Option ... – sinisake

Antwort

1

Sie können display: none nicht verwenden, um dies zu tun. Verwenden Sie stattdessen die CSS-Eigenschaft visibility. Da Sie den Übergang für top (plus ein paar mehr) -Eigenschaft verwenden, müssen Sie auch einen variierenden top Wert verwenden.

.navigation-third { 
    background: #14507d; 
    border-radius: 0 0 4px 4px; 
    visibility: hidden; <-- Changed 
    list-style: outside none none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    top: 0;    <-- Changed 
    width: 100%; 
    -moz-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
    -webkit-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
    transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s; 
} 

.header_right > ul > li:nth-child(2):hover .navigation-third { 
    visibility: visible; <-- Changed 
    top: 33px;   <-- Added 
} 

Hinweis:

aber sagen, dass Ihre CSS sollte wie folgt aussehen Sie müssen noch ein wenig mit z-index spiele ich denke, da diese Schnipsel das Drop-down vor Ihrem nav Artikel platziert (doesn Ich sehe nicht glatt aus. Sie können auch mit dem gleitenden Übergang spielen. Ändern Sie einfach Ihre oberen Werte entsprechend.

Demo

1

Wenn ich Sie richtig verstehe Sie Ihre CSS, um den Übergang zwischen Ihrer Positionierung auf .navigation-third Attribute, wenn sie auf seinem übergeordneten Element schweben?

Wenn ja, funktioniert es nicht, da das einzige, was gerade passiert, ist, dass die Anzeigeeigenschaft geändert wird. Es gibt keine andere Position für den Übergang zwischen.

Eine Lösung besteht darin, Ihre "Standard" -Position hinzuzufügen, wenn die Liste ausgeblendet ist, und dann Ihre "korrekten" Positionierungswerte beim Schweben.

Auch in diesem Szenario (wenn Sie möchten JavaScript vermeiden) Sie zwischen dem Element des opacity Wert übergehen wollen, anstatt seine display Wert, wenn Sie zeigen möchten/verstecken, da CSS nicht zwischen display Eigenschaften übergehen kann. Eine wichtige Sache, die dieser Implementierung hinzugefügt werden muss, ist pointer-events: none, wenn das Element ausgeblendet ist, um versehentliche Klicks oder Hover zu vermeiden.

1

Sie kann nicht auf dem Display des Objektes Übergang. Sie können dies einfach mit jQuery erreichen. Hier ist ein Beispiel fiddle.

$('#sec').hover(function(){ 
     $('.navigation-third').stop().slideToggle('slow'); 
    }); 

Hoffnung, dies hilft Ihnen.

+0

Warum hast du stop() drin? Es funktioniert auch anders. –

+0

Wenn ich mehrmals schnell ein- und ausbleiche (sagen wir dreimal in 2 Sekunden). Die Animation wird 3 Mal nach dem Verschieben der Maus ausgeführt. Um dies zu sehen, entfernen Sie den stop() aus dem Code und schweben Sie in kürzester Zeit hinein und heraus. – Sasith

+0

Okay, ich habe es. Upvoted –