在我点击它之前，悬停下拉菜单消失了

Question

我的帖子下方出现了一些按钮。其中一个按钮是社交分享按钮，当您将鼠标悬停在它上面时，会出现一个社交分享菜单。问题是我无法进入菜单，因为一旦我的鼠标离开主共享按钮，它就会消失。我有 30px 的边距，所以我假设这是导致问题的原因。但是我不知道如何解决它，因为我想要 30px 的边距。有人有解决办法吗？

这是一个粗略的小提琴（看起来不像我的，但你明白了）-https://jsfiddle.net/8e3459g6/

当您将鼠标悬停在分享按钮上时，我的实际外观 -

<div class="wrap">

  <img class="main-share button" src="http://amandoblogs.com/wp-content/uploads/2014/08/share-e1408475480528.png" />

  <div class="share-buttons">

    <a href="http://twitter.com/home/?status=Love this post by @ <?php the_title(); ?> - <?php the_permalink(); ?>" target="_blank" title="Tweet this!"><img src="https://www.theclimategroup.org/sites/all/modules/custom/tcg_social_media_icons/icons/black/16x16/twitter.png"></a>

    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
      <img src="http://www.shipwreckmuseum.com/wp-content/themes/shipwreckmuseum/assets/facebook-icon.png" alt="Facebook" />
    </a>

    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
      <img src="https://lh4.googleusercontent.com/-FaD4j4FL1Bc/TuEf9aN1gEI/AAAAAAAABek/kVqztZRwJ1w/s128/Pinterest_Favicon.png" alt="Pinterest" />
    </a>

    <a href="http://www.facebook.com/sharer.php?url=<?php the_permalink(); ?>" target="_blank">
      <img src="http://www.ihatestevensinger.com/osafe_theme/images/user_content/images/icon-heart.png" alt="Heart" />
    </a>

  </div>
</div>

.wrap:hover .share-buttons {
      display:block;
  position: absolute;
 left: 50%;
 white-space: nowrap;
    margin-left:-34px;
}
.wrap:hover .triangle-share {
      display:block;
  position: absolute;
 white-space: nowrap;

}
.share-buttons {
  display: none;
    letter-spacing: 15px;
    background-color:#efefef;
    padding:10px 20px;
    margin-top:30px;
}
.main-share-button {

}
.triangle-share {
border-bottom: 12px solid #efefef;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width: 0;
  height: 0;
margin-top:18px;
    margin-left:8px;
  content: "";
  display: none;
}
.wrap {
    display: inline-block;
}

Answer 1

您可以添加偏移量，直到您的菜单消失。一个像 100 毫秒这样的小值，当鼠标悬停在菜单上时，您可以将其锁定。

Answer 2

听起来好像在子菜单有机会显示之前触发了鼠标移出事件。删除那个margin-top并将其替换为父菜单上30px的padding-bottom是否有效？