Foundation 6 响应式菜单错误 dropdown/drilldown

Question

所以我想为中型和大型设备提供下拉菜单，为小型设备提供下拉菜单。但是我不认为我做对了，我得到了一些奇怪的东西。

如果我将页面加载到一个中型和更大的设备上，我认为使用它后在向下钻取菜单上有 1px 的蓝线。
如果我在小型设备上加载页面，它就会损坏。

<body class="no-js">
  <ul class="horizontal dropdown menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
    <li>
      <a href="#">Item 1</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li>
          <a href="#">Item 1A</a>
          <ul class="is-dropdown-submenu-parent menu">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
            <li><a href="#">Item 1D</a></li>
            <li><a href="#">Item 1E</a></li>
          </ul>
        </li>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li><a href="#">Item 2A</a></li>
        <li><a href="#">Item 2B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li><a href="#">Item 3A</a></li>
        <li><a href="#">Item 3B</a></li>
      </ul>
    </li>
  </ul>
</body>

JavaScript/jQuery:

jQuery(document).ready(function() {
  jQuery(document).foundation();
});

和一个显示错误的小视频：

https://sendvid.com/oxg1jckq

查看第 1 项，那里有一行。并且小屏幕加载被破坏 totaly.So 我该如何做中型的下拉菜单和小尺寸的下拉菜单？有帮助吗？

Answer 1

好的，Alex，很遗憾，这只是您对中大屏幕的关注的部分回答。看起来您的特定问题可能只出现在 chrome 或只是一系列浏览器中。

中、大屏幕：

据我所知，当您单击 'back' 按钮时，浏览器会将 'focus' 放在 'back' 按钮上。在某些用蓝色轮廓表示的浏览器中，正是这个蓝色轮廓 'leaking' 稍微进入了您的屏幕，这就是您看到蓝线的原因。蓝线实际上是整个按钮的轮廓，但是因为它已经滑到页面的一侧，所以您只能看到按钮的左边框。要查看整个边框，请尝试按键盘上的 'tab' 键以 select 不同的菜单元素，您会在菜单项周围看到一个蓝色轮廓，表明您已将焦点放在它上面。

老实说，我认为这没什么大不了的，也许在您单击后退箭头后焦点结束的位置是一个更大的问题。无论如何，这是针对 chrome 浏览器的修复：

.js-drilldown-back a {
      outline: -webkit-focus-ring-color auto 0px;
}

或者这个应该也可以，虽然我只试了上面的方法

.js-drilldown-back a {
      outline: 0px;
}

看看进展如何，但我稍后会看看你的其他问题，但至少这是一个开始。

Answer 2

发现 class is-dropdown-submenu-parent 应该按照 https://github.com/zurb/foundation-sites/issues/9189

的建议删除的问题

Foundation 6 响应式菜单错误 dropdown/drilldown

Foundation 6 responsive menu bug dropdown/drilldown

zurb-foundation

zurb-foundation-6