Question

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

我已经确定当鼠标离开父/子元素时，子元素会在滑动过渡开始之前快速移出视图（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

取下左边的属性并使用overflow：hidden 另外，我不认为使用＆＃34; auto＆＃34;过渡工作。它会自动弹出使用此属性。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以在常规状态中添加transition-delay。

1s延迟的示例。

position:relative已添加到父li，因此left:auto;可以转换为left:0;以便应用transition。

＆＃13;

#menu ul ul {
  left: -9999px;
  position: absolute;
  background: red none repeat scroll 0 0;
  transition:0s 1s;/* set a delay */
}
#menu ul li{
position:relative;
}
#menu li:hover>ul {
  left: 0;
  transition:0s 0s;/* reset delay */
}

#menu ul ul li {
  height: 0;
  transition: height 0.2s ease 1s;/* set a delay */
}

#menu ul li:hover>ul>li {
  height: 32px;
  transition: height 0.2s ease 0s;/* reset delay */
}

＆＃13;

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

＆＃13;

Answer 3

我会移除left属性，只转换height。如果您还使用overflow属性，这将有效。

#menu li ul {
  height: 0px;
  overflow: hidden;
  background: red none repeat scroll 0 0;
  transition: height 0.2s ease 0s;
  position: absolute;
}

#menu ul li:hover>ul {
  height: 32px;
  overflow: auto;
}

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

当鼠标离开元素时，CSS过渡结束得太早

3 个答案: