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