React - ドロップダウンメニューのホバーがあまりにも速く閉じる

Question

私はこのドロップダウンメニューを持っていて、それは親セレクタと子セレクタの間にギャップを持っています。それはそれを速く閉じる原因となっています。
Fiddle

render() { 
    return (
     <div class="dropdown-wrapper"> 
      <div class="image">Image</div> 
      <ul class="dropdown-container"> 
       <li class="dropdown-list">Nothing</li> 
       <li class="dropdown-list">Help</li> 
       <li class="dropdown-list">Settings</li> 
       <li class="dropdown-list">Logout</li> 
      </ul> 
     </div> 
    ); 
    } 

私はいくつかのことを試してみました。同じ動作

変更するCSSの私は、この問題を解決するにはどうすればよい

jqueryの

を使用してみました

になりonMoverOverとONMOUSEOUTを、反応使っ

1. 。私が間違っていることを示していますか？ .dropdown-container上

Answer 1

margin-top: 0; - あなたはすぐにあなたは、もはやそれの上にマウスを移動さ.imageのdivをオフに移動すると、.dropdown-container DIVに余裕を持っている...ので、ドロップダウンが閉じているので。私は修正の高さと幅の追加パディングとのイメージを持っている

.dropdown-wrapper > .image { padding-bottom: 15px; }

Fiddle Update