帶有延遲問題的純CSS下拉菜單

Question

我找到了一個很棒的CSS解決方案，用於帶有子菜單的菜單，純CSS：
鏈接： Phil Hoyt的Codepen

現在我希望延遲隱藏鼠標移動菜單。 因此，當鼠標離開菜單項（短時間）時，菜單不會直接隱藏。 所以我在這個頁面上添加了一些CSS，導致下面的代碼。 上一個鏈接正好解釋了我的問題，但我無法用提示修復它。

當您將主菜單項懸停時，第一個項目的延遲會使菜單項保持打開狀態，而鼠標已經在第二個菜單項上。 見下面的gif。

我怎么能解決這個問題？ 保持延遲，但當另一個菜單打開時，立即隱藏菜單項。

---

 #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { visibility: hidden; transition: 0.2s 1s; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { visibility: visible; transition-delay: 0s; } 

 <h1>Simple Pure CSS Drop Down Menu</h1> <nav id="primary_nav_wrap"> <ul> <li class="current-menu-item"><a href="#">Home</a></li> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Deep Menu 1</a> <ul> <li><a href="#">Sub Deep 1</a></li> <li><a href="#">Sub Deep 2</a></li> <li><a href="#">Sub Deep 3</a></li> <li><a href="#">Sub Deep 4</a></li> </ul> </li> <li><a href="#">Deep Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li class="dir"><a href="#">Sub Menu 1</a></li> <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> <li><a href="#">Category 5</a></li> </ul> </li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> 

Answer 1

非常簡單，只有在不懸停菜單容器時才會添加轉換延遲（將鼠標移出）

順便感謝靈感如何解決意外懸停嵌套的窄菜單項。

#primary_nav_wrap ul:hover ul
{
    transition: 0s;
}
#primary_nav_wrap ul:not(:hover) ul
{
    transition: 0.1s 1s;
}

（這應該做同樣的事）

#primary_nav_wrap ul ul
{
    transition: 0.1s 1s;
}
#primary_nav_wrap ul:hover ul
{
    transition: 0s;
}

 #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { visibility: hidden; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap:not(:hover) ul { transition: all 0.1s; transition-delay:1s; } #primary_nav_wrap:hover > ul:not(:hover) { transition: all 0s!important; transition-delay:0s!important; display:none!important; } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { visibility: visible; transition-delay: 0s; } 

 <h1>Simple Pure CSS Drop Down Menu</h1> <nav id="primary_nav_wrap"> <ul> <li class="current-menu-item"><a href="#">Home</a></li> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Deep Menu 1</a> <ul> <li><a href="#">Sub Deep 1</a></li> <li><a href="#">Sub Deep 2</a></li> <li><a href="#">Sub Deep 3</a></li> <li><a href="#">Sub Deep 4</a></li> </ul> </li> <li><a href="#">Deep Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li class="dir"><a href="#">Sub Menu 1</a></li> <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> <li><a href="#">Category 5</a></li> </ul> </li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a></li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>