Question

尝试使用CSS动画创建动画下拉菜单，而不使用任何JS。我以为我一直在咆哮着正确的树，却看不到我出错的地方，这个简化的菜单项......

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

以下CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

认为应该成功地导致向下滚动div，但它只是不断出现。有什么想法吗？干杯

Answer 1

请参阅此主题以供参考：How can I transition height: 0; to height: auto; using CSS?

简单地说，你无法动画到height: auto;。它不受支持。如果您具有预定的固定高度，则可以通过设置该特定值的动画来实现。例如0px到100px。但是不支持自动。

上面链接中的第一个答案链接到另一篇文章，其中给出了一种解决方法。您可以浏览一下，以便在您的网站上实施。

Can you use CSS3 to transition from height:0 to the variable height of content?

Answer 2

您不能将height:auto的CSS转换用于特定值。

.menu:hover ul {
    height: 100px;
}

http://jsfiddle.net/mblase75/cWZMu/

Answer 3

下拉列表的动画可以用纯CSS实现：

ul {
  overflow: hidden;
  transition: all .3s ease;
}

ul.folded {
  max-height: 0;
}

ul.unfolded {
  max-height: 300px; //value of max-height should always bigger than actual sum of all li's height
}

Answer 4

我能够构建一个类似于 @artcher 的解决方案，但我使用了 max-height: 100%; 并且效果很好：

ul.submenu {
  overflow: hidden;
  transition: all .3s ease;
  max-height: 0;
}

.top-level-item:hover {
  .submenu {
    max-height: 100%;
  }
}

带动画的CSS下拉菜单（无js）

4 个答案: