只使用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;