ピュアCSS遅延問題

Question

でドロップダウンメニューを私はサブメニューとメニューのための偉大なCSSのソリューション、純粋なCSSを見つけました：
リンク：Codepen by Phil Hoyt

今私は、マウスの動きにメニューを非表示にするに遅延をしたいです。そのため、メニュー項目からマウスを離したときにメニューが直接非表示にならないようにします（短時間）。そこでCSSを追加して、on this pageというコードを追加しました。以前のリンクは私の問題を正確に説明していますが、私はヒントを修正することができませんでした。

メインメニュー項目をホバーすると、最初の項目の遅延はメニュー項目を開いたままにしますが、マウスはすでに2番目のメニュー項目にあります。以下のgifを参照してください。

これをどのように修正できますか？遅れを保つが、別のメニューが開いているときは、メニュー項目を即座に隠す。あなたは、メニューのコンテナを置くていない場合にのみ、

---

#primary_nav_wrap 
 
{ 
 
\t margin-top:15px 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
\t background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
\t visibility: hidden; 
 
    transition: 0.2s 1s; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t 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 
 
{ 
 
\t margin-top:15px 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
\t font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
\t background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
\t visibility: hidden; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t 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 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
\t 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>