1

我正在尝试创建一个带有一些微妙过渡的下拉导航栏。我不能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实际上没有按应有的方式工作？

4

1 回答 1

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

演示

先试后买

于 2013-09-30T20:06:21.497 回答