React - выпадающее меню hover закрывается слишком быстро

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> 
    ); 
    } 

Я попробовал несколько вещей.

1. с использованием реакции onMoverOver и onMouseOut, что приводит такое же поведение

2. изменяющемся Css

3. Пробовал с помощью JQuery

Как я могу решить эту проблему. Любое указание на то, что я делаю неправильно?

Answer 1

margin-top: 0; на .dropdown-container - Потому что у вас есть запас на .dropdown-container DIV, как только вы отъезжать .image ДИВ вы больше не парит над ним ... так выпадающий закрывается.

Fiddle update

Если вы хотите пространство .. добавить в .image класс ...

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

Fiddle Update