Question

所以我希望下载适用于中型和大型设备以及小型设备的下钻。但是我不认为我做对了，我得到了一些奇怪的东西。

如果我将页面加载到中等大小的设备上，我认为在使用它之后，钻取菜单上会显示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那里有一条线。并且小屏幕尺寸的负载完全被破坏。那么如何进行中等下拉和下钻仅用于小型？有什么帮助吗？

Answer 1

好的亚历克斯，不幸的是，这只是你对中大屏幕关注的部分答案。看起来您的特定问题可能只发生在Chrome或一系列浏览器中。

中，大屏幕：

据我所知，浏览器正在关注＆＃39;在＆＃39;后面＆＃39;单击它时按钮。在一些用蓝色轮廓表示的浏览器中，这个蓝色轮廓是“泄漏”。稍微进入你的屏幕，这就是你看到蓝线的原因。蓝线实际上勾勒出了entine按钮，但由于它已滑到页面的一侧，因此您只能看到按钮的左边框。要查看整个边框，请尝试按“＆”按钮。键盘上的键可选择不同的菜单元素，菜单项周围会显示一个蓝色轮廓，表示您已专注于它。

说实话，我不认为这是一个大问题，也许在点击后退箭头后焦点最终会出现更大的问题。无论如何，这是Chrome浏览器的修复：

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

或者这也应该有用，虽然我只尝试了上面的

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

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

Answer 2

根据https://github.com/zurb/foundation-sites/issues/9189

的建议，发现类is-dropdown-submenu-parent应该被删除的问题

基础6响应式菜单错误下拉/向下钻取

2 个答案: