CSS transition not working on submenu on hover

Question

I have a menu with submenu working fine, however I am trying to add css transition on sub menu, If I mouseover on second nav item, the submenu which appear should have slide from top to bottom transition but its not working, can anybody please suggest?

Here is the working 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

You cant use transition on display property. You can simply achieve this by using jquery. here is example fiddle.

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

Hope this helps you.

Answer 2

You can't use display: none to do this. Use CSS's visibility property instead. Also, since you're using transition for top (plus a few more) property, you also have to use a varying top value.

That being said, your CSS should look like this:

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

Note: You still have to play a bit with z-index I guess, since this snippet places the dropdown in front of your nav item (doesn't look smooth). You may also play with the sliding transition. Just change your top values accordingly.

Demo

Answer 3

If I understand you correctly you want your CSS to transition between your positioning attributes on .navigation-third when hovering on its parent element?

If so, it doesn't work because the only thing happening right now on hover is that the display property is changed. There's no other position for it to transition between.

A solution is to add your "default" position when the list is hidden and then your "correct" positioning values when hovering.

Also, in this scenario (if you want to avoid JavaScript) you want to transition between the element's opacity value rather than its display value when you want to show/hide it, since CSS cannot transition between display properties. An important thing to add to this implementation is pointer-events: none when the element is hidden to avoid accidental clicks or hovers.