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;