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

这是我要尝试的内容

从四个ease指令中删除transition。这种转变可能具有“长尾”，使其在不方便的时间内几乎不可见。
如果不是更好，您可能必须完全删除转换（删除四个transition和四个transform指令）。您将不再通过下拉列表获得花哨的退出，但您也将不再拥有非常烦人的UX问题。你的决定。
编辑：另一个想法：在上述两次尝试之前，您可以尝试将visibility: hidden;更改为display: none;。如果有效，我会解释它（否则没关系）。

取消激活菜单下拉列表

1 个答案: