垂直菜单导航 - 菜单滚动时不显示子菜单

Posted 2023-03-06

【中文标题】垂直菜单导航 - 菜单滚动时不显示子菜单

【英文标题】：Vertical menu Navigation - Sub menu is not displaying when Menu has scroll

【发布时间】：2015-11-21 10:32:13

【问题描述】：

在垂直菜单中，当菜单悬停时会显示子菜单。当菜单数量更多时，它会滚动。

问题

当菜单滚动时，我无法移动到子菜单。但我可以看到子菜单。

小提琴

我有 Fiddle Here

#magik-verticalmenu .verticalmenu.navbar-nav > li.dropdown:hover .dropdown-menu
    display: block;
    opacity: 1;
    left: 100%;
    top: 0;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);

【参考方案1】：

为您的子菜单添加负边距，它将位于滚动条上方

#magik-verticalmenu .verticalmenu.navbar-nav > li.dropdown:hover .dropdown-menu
  display: block;
  opacity: 1;
  left: 100%;
  top: 0;
  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
  margin-left:-20px;

http://jsfiddle.net/6fg4rafc/10/

【讨论】：

感谢您的解决方案。通过这个解决方案，用户看不到滚动的时间有多长。我们可以在滚动和相同位置的情况下显示子菜单吗

问题是当用户悬停滚动条时，他不再悬停菜单项，这就是子菜单消失的原因。但是即使使用我的解决方案，当子菜单未显示时，用户也可以看到滚动条，因此他应该知道他可以滚动。目前我没有其他解决方案，我希望它能以任何方式帮助您找到更好的解决方案；）