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
}

注意：我猜你仍然需要使用z-index，因为这个 sn-p 将下拉菜单放在导航项目的前面（看起来不太流畅）。您也可以使用滑动过渡。只需相应地更改您的最高值。

Demo

Answer 2

如果我理解正确，您希望 CSS 在其父元素上悬停时在 .navigation-third 上的定位属性之间转换？

如果是这样，它就不起作用，因为现在在悬停时唯一发生的事情是显示属性发生了变化。它没有其他位置可以转换。

解决方案是在列表隐藏时添加“默认”位置，然后在悬停时添加“正确”定位值。

此外，在这种情况下（如果您想避免使用 JavaScript），当您想要显示/隐藏元素时，您希望在元素的 opacity 值而不是其 display 值之间转换，因为 CSS 无法在 @987654324 之间转换@ 特性。在此实现中添加的重要内容是pointer-events: none，当元素被隐藏以避免意外点击或悬停时。

Answer 3

您不能在显示属性上使用过渡。您可以通过使用 jquery 简单地实现这一点。这是示例fiddle。

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

希望对你有所帮助。