Foundation 6 响应式菜单错误下拉/向下钻取答案

【问题标题】：Foundation 6 responsive menu bug dropdown/drilldownFoundation 6 响应式菜单错误下拉/向下钻取
【发布时间】：2016-08-18 19:30:28
【问题描述】：

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

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

这是一个代码笔：http://codepen.io/anon/pen/BzEjov

<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 项，那里有一条线。并且小屏幕尺寸的负载完全被破坏了。那么我该如何做中的下拉和仅小尺寸的钻取？有什么帮助吗？

【问题讨论】：

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

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

中、大屏幕：

据我所知，当您单击浏览器时，浏览器会将“焦点”放在“返回”按钮上。在某些由蓝色轮廓表示的浏览器中，正是这个蓝色轮廓“泄漏”到您的屏幕中，这就是您看到蓝线的原因。蓝线实际上勾勒出整个按钮，但由于它滑到了页面的一侧，您只能看到按钮的左边框。要查看整个边框，请尝试按键盘上的“tab”键来选择不同的菜单元素，您会在菜单项周围看到一个蓝色轮廓，表示您已将注意力集中在它上面。

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

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

或者这也应该有效，尽管我只尝试了上述方法

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

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

【讨论】：

【解决方案2】：

发现应该按照https://github.com/zurb/foundation-sites/issues/9189的建议删除类is-dropdown-submenu-parent的问题

【讨论】：