CSS轉換隻影響不是ul

Question

我已經從這個網站做了一個純粹的CSS導航欄。

http://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu.html

在這裏看到一個粗版本（看起來廢話，就忽略這個問題）

http://codepen.io/spinnaay/pen/ZOVNwg

它工作正常，除了一個細節。

當處於'移動模式'時，下拉菜單不會轉換，只有文本。基本上ul不是過渡，而是li。

如果更改

nav #menu-toggle:checked ~ ul { 
    height:100%; 
} 

到

nav #menu-toggle:checked ~ ul { 
    height:100vh; 
} 

的作品，但隨後的菜單太長。

這是一個奇怪的問題，但肯定有一個簡單的答案。

感謝您的期待！

Answer 1

• height：100vh - >表示視口高度的100％。 （瀏覽器窗口）
• 身高：100％ - >意味着父母身高的100％。

根據我的理解，您不能在高度百分比上使用過渡。但是您可以在最小高度屬性上使用轉換。

嘗試添加以下代碼：

nav #menu-toggle:checked ~ ul { 
    min-height:0; 
    transition: min-height .2s ease-in-out; 
} 

nav #menu-toggle:checked ~ ul { 
    min-height:900px; // number higher then the total size of the children 
}