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

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

您不能将 CSS 过渡与 height:auto 一起使用，只能使用特定值。

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