カーソルをプライマリメニューから移動するとドロップダウンメニューが消えます

Question

かなり大きなヘッダーを持つサイトのドロップダウンメニューで作業しています。ヘッダーの内側には、プライマリメニューを含む<ul>があり、各メニュー項目にはドロップダウンが表示されます。私が抱えている問題は、プライマリメニューがヘッダーよりも短く、カーソルがプライマリメニューまたはドロップダウン上にホバリングしていない場所を移動するための小さなスペースがあることです。この短いスペースでは、ドロップダウンメニューが消えます。どうしたらこのことが起こらないようにすることができますか？私はドロップダウンを移動することはできません、またはヘッダーと重複します。私はまた、<ul>の高さを効果的に変更することができませんでした。

サイトはプライベートですが、私は私がいる問題表示jsfiddle作成しました：https://jsfiddle.net/x0hvdaqn/

編集 を私の代わりに簡略化のため、ULのdiv要素とフィドルをしたが、時にしていました私はそれが働き始めたulに変更しました。私が構築している実際のメニューは同じ方法で作られていますが、動作しません。なぜこれが当てはまるのでしょうか？

代わりにdiv要素のULの新フィドル：https://jsfiddle.net/tgqof8my/

Answer 1

は、このコードを使用します。 dropに余裕を減らす必要があります。私はあなたのjsfiddleでULタグを見ることができないこの...

#wrapper { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: green; 
 
    text-align: center; 
 
} 
 
#button { 
 
    height: 40px; 
 
    width: 25%; 
 
    margin: auto; 
 
    background-color: yellow; 
 
    top: 25px; 
 
    position: absolute; 
 
} 
 
#drop { 
 
    display: none; 
 
    background-color: red; 
 
    margin-top: 20px; 
 
} 
 
#button:hover #drop { 
 
    display: block; 
 
}

<div id="wrapper"> 
 
    <div id="button"> 
 
    Primary Menu Item 
 
    <div id="drop"> 
 
    Dropdown 
 
    </div> 
 
    </div> 
 
    Header 
 
</div>