javascript - 当鼠标离开元素时，CSS 过渡过早结束

Question

我正在为我的网站制作菜单。已经完成了，只有一个小细节让我很烦。看看下面的片段。当我将鼠标悬停在父元素上时，子元素会随着过渡向下滑动。但是一旦鼠标离开父/子元素，子元素就会消失。

我已经确定，当鼠标离开父/子元素时，子元素会在向上滑动过渡开始之前迅速移出 View (left: -9999px;)。

我怎样才能让它在鼠标离开菜单时以相同的过渡类型滑回菜单？是否有仅 CSS 的解决方案，或者我是否也必须使用 jQuery？

ul {
  list-style: none;
  padding: 0;
}

li {
  width: 180px;
}

#menu ul ul {
  left: -9999px;
  position: absolute;
  background: red none repeat scroll 0 0;
}

#menu li:hover>ul {
  left: auto;
}

#menu ul ul li {
  height: 0;
  transition: height 0.2s ease 0s;
}

#menu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#menu ul li:hover>ul>li {
  height: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li>Parent Item
      <ul>
        <li>Child Item
          <ul>
            <li>Child Child Item</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

去掉left属性，使用overflow: hidden 另外，我不认为将“自动”与过渡一起使用。它会使用此属性自动弹出。

#menu ul ul {
  position: absolute;
  overflow: hidden;
  background: red none repeat scroll 0 0;
}

#menu li:hover>ul {
  
}

#menu ul ul li {
  height: 0;
  transition: height 0.2s ease 0s;
}

#menu ul li:hover>ul>li {
  height: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li>Parent Item
      <ul>
        <li>Child Item</li>
      </ul>
    </li>
  </ul>
</nav>