Runter-Dropdown mit nur css

Question

Ich versuche, ein Untermenü nach unten rutschen. Die Referenz, der ich folge, ist - https://codepen.io/shshaw/pen/gsFch

Aber das Dropdown nicht rutscht. Es erscheint nur bei Hover.

Html-Code -

<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> 

Demo - https://jsfiddle.net/squidraj/seqc1w9f/6/

Jede Hilfe sehr geschätzt wird.

Answer 1

display kann nicht animiert werden. Dies muss entfernt werden.

ul#nav li ul { 
    display: none;