html - 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(以及更多)属性使用 transition，因此您还必须使用不同的 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
}

注意:我想您仍然需要尝试使用 z-index，因为此代码段将下拉菜单放置在您的导航项前面(看起来不流畅)。您也可以玩滑动过渡。只需相应地更改您的最高值即可。

Demo