Question

我正在尝试创建一个带有一些微妙过渡的下拉导航栏。我无法使用height:0 > height:auto来隐藏内容，因为它只适用于过渡。我尝试使用max-height:0 > max-height:5000px但似乎内容实际上仍然只是被opacity隐藏了。这会产生一个问题，因为当您将鼠标悬停在“隐形”内容上时，即使它实际上不应该显示，也会显示出来。

这是一个演示：

http://codepen.io/ajrdesign/pen/cabGx

HTML：

    <ul class="nav">
  <li><a href="">Home</a></li>
  <li class="has-dropdown">
    <a href="">Products
    </a>
    <div class="dropdown-content">
      <ul class="nav">
        <li><a href="#">Some</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Links</a></li>
      </ul>
    </div>
  </li>
  <li><a href="">Solutions</a></li>
  <li><a href="">More</a></li>
</ul>

CSS

ul {
  list-style:none;
}
li {
  display:inline-block;
}
.has-dropdown{
    position: relative;
}
.dropdown-content{
    opacity:0;
    max-height: 0;
    -webkit-transition: opacity 200ms ease-in-out 350ms;
    -moz-transition: opacity 200ms ease-in-out 350ms;
    -ms-transition: opacity 200ms ease-in-out 350ms;
    -o-transition: opacity 200ms ease-in-out 350ms;
    transition: opacity 200ms ease-in-out 350ms;
    position: absolute;
    z-index: 1000;
}

.has-dropdown:hover .dropdown-content{
    display:block;
    opacity: 1;
    max-height: 5000px;
}

什么是挂断？为什么max-height:0实际上不应该像它应该的那样工作？

Answer 1

以下是解决问题的方法：想法是切换元素的可见性并将其淡入。当反转时，在鼠标离开时，子菜单会逐渐淡出，可见性再次设置为隐藏，但这次延迟，以便在元素完成淡出后发生：

<强> CSS

.dropdown-content {
    visibility: hidden;
    opacity:0;
    position: absolute;        
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0.55s linear;
}

.has-dropdown:hover .dropdown-content{
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s 0.35s ease-in-out, visibility 0s 0s linear;
}

<强>演示

Try before buy

为什么max-height不会隐藏我的内容

1 个答案: