當鼠標離開元素時，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>