在設計子選單時候，需要實現當滑鼠移動到選單時候，子選單顯示，否則子選單都處於隱藏狀態。實現這個功能使用js的話很簡單實現，但是我想用純CSS，使用純CSS的話，就會遇到滑鼠移開選單後，子選單就馬上消失了（display：noe或者visibility：hidden），就滑鼠還沒移動到子選單部分，子選單就消失了，無法操作到子選單。如下圖的：當滑鼠移動到A時候，B子選單出現，且B子選單有足夠的顯示時間讓使用者滑鼠移動到B子選單。

   網上搜索了一遍，都是說用transition-delay......來實現延遲、動態效果，但是我覺得用這個來解決這個問題不太恰當。此時我想到了應該嘗試用opacity來延遲隱藏/顯示它。具體程式碼：

  A{

    opacity: 0;      transition: 0.5s; 

}

 A:hover+B{             //A、B為相鄰同級元素   A:hover後操作B的opacity

    opacity: 1; 

}

B:hover{

    opacity: 1; 

}

   完成。