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

我试了几件事。

1. 使用反应onMoverOver和onMouseOut，导致相同的行为

2. 更改css

3. 尝试使用jquery

我该如何解决这个问题。有什么迹象表明我做错了吗？

Answer 1

margin-top: 0;上的{p> .dropdown-container - 因为您在.dropdown-container div上有一个保证金，一旦您离开.image div，您就不再在其上空盘旋...所以下拉关闭。

Fiddle update

如果您想要空间..将其添加到.image班级......

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

Fiddle Update