只使用CSS滑下拉下來

Question

我想滑下一個子菜單。我所遵循的參考是 - https://codepen.io/shshaw/pen/gsFch

但下拉不滑。它只是出現在懸停。

HTML代碼 -

<nav id="main-nav" class="clearfix"> 
    <div class="nav-inner clearfix"> 
    <div class="menu-main-navigation-container"> 
     <ul id="nav" class="clearfix page"> 
     <li class="item"> 
      <a href="" class="title">Menu</a> 
      <ul class="sub-menu"> 
      <li class="item"><a href="" class="title">Sub Menu 1</a></li> 
      <li class="item"><a href="" class="title">Sub Menu 2</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

演示 - https://jsfiddle.net/squidraj/seqc1w9f/6/

任何幫助，高度讚賞。

Answer 1

display不能動畫。這需要刪除。

ul#nav li ul { 
    display: none;