当鼠标离开元素时，CSS转换过早结束

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

脱下左属性，并使用溢出：隐藏 另外，我不认为使用“自动”过渡工作。它会自动弹出使用此属性。

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

Answer 2

您可以在常规状态下增加transition-delay。

例子与1s延迟。

position:relative被添加到父li，所以可以left:auto;为了应用transition变成left:0;。

#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 */ 
 
}

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

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>