向下滚动悬停时下拉菜单将保持打开状态

Question

[每当我将鼠标悬停在链接上时，都会显示下拉列表，但是我无法离开链接并向下滚动到打开的下拉框。在我到达那里之前，它关闭了。无论如何，我可以让盒子等待2-3秒再关闭吗？

Dropdown-

 <a href="***" id="get_btn" class="business_link" target="_blank">For Business</a> 
  <ul class="business_dropdown">
    <li>
      <a class="" href="***">Hospitals</a>
    </li>
    <li>
      <a class="" href="***">Airports</a>
    </li>
    <li>
      <a class="" href="***">Theme Parks</a>
    </li>
  </ul>

下拉式CSS-

  .business_dropdown {
    display: none;
    list-style-type: none;
    position: absolute;
    background-color: #fff;
    min-width: 240px;
    height: 450px;
    z-index: 1;
    float: left;
    transform: translateY(-1px);
    margin-left: 75px;
    margin-top:25px;
    background-color: #fbfbfb;
    padding: 30px 30px 30px;
    border: 1px solid #f1f1f1;
  }

  .business_dropdown a {
    color: #000;
    font-family: 'Libre Franklin';
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
    text-align: left;
    line-height: 23.8px;
  }

  .business_link:hover ~ .business_dropdown {
    display: block; 
  }

  .business_link {
    text-decoration: none;
    font-size: 13px;
    line-height: 1.28;
    font-weight: 600;
    text-transform: uppercase;
    padding-right: 25px;
    text-decoration: none;
    letter-spacing: .05em;
  }

Answer 1

例如，如果您的下拉菜单是另一个菜单（ul）的一部分，则可以在包装元素上进行悬停操作，您可以将悬停应用于包含该下拉菜单的li。

<ul>
    <li class="business_link">
        <a href="***" id="get_btn" target="_blank">For Business</a> 
        <ul class="business_dropdown">
            <li>
                <a class="" href="***">Hospitals</a>
            </li>
            <li>
                <a class="" href="***">Airports</a>
            </li>
            <li>
                <a class="" href="***">Theme Parks</a>
            </li>
        </ul>
    </li>
</ul>

然后您可以相应地更改CSS以重新设置链接的样式。