CSS移行がホバー上のサブメニューでは機能しない

Question

サブメニューのメニューが正常に動作していますが、サブメニューにCSSの切り替えを追加しようとしています。誰かがお勧めしますか？私が正しくあなたを理解していればここで

が働い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>

Answer 1

これを行うにはdisplay: noneを使用できません。 CSSのvisibilityプロパティを代わりに使用してください。また、top（およびそれ以上の数）のプロパティのトランジションを使用しているため、可変のtop値を使用する必要があります。言われていること

、あなたのCSSは次のようになります。

.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 
} 

注：このスニペットは、あなたのNAVアイテム（doesnの目の前にあるドロップダウンを置くので、あなたはまだ、私は推測z-indexで少しプレイしています滑らかに見える）。あなたはまた、スライドの移行でプレイすることができます。それに応じてトップ値を変更してください。あなたはdisplayプロパティの移行を使用しカント

Demo

Answer 2

であるあなたは、その親要素の上にホバリング時にあなたの位置との間を遷移するように、あなたのCSSは.navigation-thirdに属性をしたいですか？

これが有効な場合は、ホバー上で現在表示されているのは、表示プロパティが変更されたためです。間に移行する他のポジションはありません。

解決策は、リストが隠されている場合は「デフォルト」の位置を追加し、ホバーする場合は「正しい」位置付け値を追加することです。

はまた、（あなたはJavaScriptを避けたい場合は）このシナリオでは、あなたはCSSがdisplay性質の間を遷移することができないので、それを隠す/表示したいときはむしろそのdisplay値よりも要素のopacity値の間を遷移します。この実装に追加する重要なことは、偶発的なクリックやホバーを避けるために要素が非表示になっている場合はpointer-events: noneです。

Answer 3

。あなたは単にjqueryを使ってこれを達成することができます。例はfiddleです。

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

希望します。