使用CSS對垂直子菜單進行動畫處理

Question

我們有菜單，其中一些菜單有子菜單。 我想在顯示帶有動畫的塊時顯示子菜單。 特別是子菜單的高度。 例如：

#menu ul.sub_menu {
    display             : none;
}

#menu li:hover ul.sub_menu {
    display             : block;
}

請看我的代碼jsfiddle.net/oa6ftrL8/ ，謝謝

Answer 1

您不能為display屬性設置動畫。 opacity: 0; 而不是display: none; 和opacity: 1; 而不是display: block;

添加一些max-height: 0; 和max-height: fartoomanypx; 動畫（因為無法將height動畫為auto ）。

https://jsfiddle.net/oa6ftrL8/1/

您將必須開始擺弄自己，以使其美麗。