javascript - 停用下拉菜单

Question

考虑中的站点:http://dev5.99medialabtest2.com/bostoncenterless/

向下滚动页面，以便“简化制造流程的解决方案”标题位于菜单后面。然后，将鼠标悬停在“产品和服务”选项卡(有一个下拉菜单)上。现在，尝试用鼠标指针接管“供应链管理”(出现在灰色的解决方案部分)，您将看到下拉菜单不允许您进入那里。

有人可以帮忙解决吗？

Answer 1

哈哈，我花了一段时间才重现你的问题。如果将鼠标从下拉菜单上移开较长时间(例如 2 秒以上)，则可以进入“供应链管理”。如果您在将鼠标移开下拉菜单后几乎立即尝试访问“供应链管理”，则下拉菜单将重新出现。

为什么会发生这种情况？当下拉菜单消失时会发生转换。我认为问题在于，下拉菜单看起来只是消失了，但尚未完全消失，因此将鼠标移回几乎看不见的下拉菜单上会使其重新出现。

导致问题的CSS似乎是.../wp-content/themes/bostoncenterless/custom.css

/* Sub Menu */
ul.navbar-nav > li > ul.sub-menu{
    top: 65px;
    z-index: 111;
    left: -10px;
    min-width: 230px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;  
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    padding-top: 10px;
    padding-bottom: 10px;
}

这是我会尝试的

• 从四个 transition 指令中删除 ease。这种转变可能具有“长尾”，使其在很长一段时间内几乎不可见。
• 如果这还不够好，您可能必须完全删除过渡(删除四个 transition 和四个 transform 指令)。您将不再有通过下拉菜单的花哨退出，但您也将不再遇到非常烦人的用户体验问题。你的决定。
• 编辑:另一个想法:在上述两次尝试之前，您可以尝试将 visibility: hide; 更改为 display: none;。如果有效，我会解释它(否则没关系)。