Sanjeev K Sanjeev K - 13 days ago 6
CSS Question

CSS transition not working on submenu on hover

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

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

Comments