Question

我有一个菜单，子菜单工作正常，但我试图在子菜单上添加css过渡，如果我鼠标悬停在第二个导航项目上，出现的子菜单应该从上到下过渡滑动但是它不起作用，可以有人请建议吗？

这是工作JSfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，那么当您将鼠标悬停在其父元素上时，您希望CSS在.navigation-third上的定位属性之间进行转换吗？

如果是这样，它不起作用，因为现在悬停时唯一发生的事情是显示属性已更改。它之间没有其他位置可供过渡。

解决方案是添加您的＆＃34;默认＆＃34;隐藏列表后的位置，然后你的＆＃34;正确＆＃34;悬停时定位值。

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

Answer 2

您无法使用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玩一下，因为这个片段会将下拉列表放在导航项目前面（看起来不平滑）。您也可以使用滑动过渡。只需相应更改您的最高值。

Demo

Answer 3

您无法在展示属性上使用转场。你可以通过使用jquery来实现这一点。这是示例fiddle。

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

希望这会对你有所帮助。

在hover

3 个答案: