html - Chrome 中的 Bourbon Refill Navigation DropDown 示例问题

Question

我正在使用他们网站上的 Bourbon SCSS/SASS 导航菜单示例： http ://refills.bourbon.io/ （粘贴在此消息底部的代码以保留以防在波旁网站上进行编辑）

我更改了 SCSS 代码中的第一行：

  $navigation-padding: 1em;

说10em。

这导致导航项目 10em 向左移动。

当我进入 Firefox 的下拉菜单时，一切正常。
在 chrome 中尝试同样的事情，并且有一个非常有限的范围可以将注意力集中在下拉菜单上，如果你离开那个狭窄的范围，菜单就会消失（当移动非常缓慢时）。此外，即使停留在狭窄的范围内并沿着项目移动光标，下拉菜单也会在第一个项目之后消失。

如何让它在 chrome 中正常运行？

注意：有没有类似 jsfiddle 的方式来演示代码以便于编辑？

编辑：

我发现，由于我使用的是同一页面中的另一个示例，其中设备（某些智能手机）相对于其容器 div 过大，这就是导致菜单在 chrome 中消失的原因。在Firefox中它工作得很好。它与 .device 类中的转换有关（我知道这一点，因为删除它会使其正常工作）。如果有人能找到解决方案，我会留下这个问题。

HTML：

<header class="navigation">
  <div class="navigation-wrapper">
    <a href="javascript:void(0)" class="logo">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
    </a>
    <a href="" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
    <div class="nav">
      <ul id="navigation-menu">
        <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
        <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
        <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
        <li class="nav-link more"><a href="javascript:void(0)">More</a>
          <ul class="submenu">
            <li><a href="javascript:void(0)">Submenu Item</a></li>
            <li><a href="javascript:void(0)">Another Item</a></li>
            <li class="more"><a href="javascript:void(0)">Item with submenu</a>
              <ul class="submenu">
                <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
                <li><a href="javascript:void(0)">Another Item</a></li>
              </ul>
            </li>
            <li class="more"><a href="javascript:void(0)">Another submenu</a>
              <ul class="submenu">
                <li><a href="javascript:void(0)">Sub-submenu</a></li>
                <li><a href="javascript:void(0)">An Item</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="navigation-tools">
      <div class="search-bar">
        <div class="search-and-submit">
          <input type="search" placeholder="Enter Search" />
          <button type="submit">
            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="">
          </button>
        </div>
      </div>
      <a href="javascript:void(0)" class="sign-up">Sign Up</a>
    </div>
  </div>
</header>

SCSS：

@import "bourbon/bourbon";
@import "base/base";
@import 'neat/neat';

header.navigation {
  $navigation-padding: 1em;
  $navigation-background: $dark-gray;
  $navigation-color: transparentize(white, 0.3);
  $navigation-color-hover: white;
  $navigation-height: 60px;
  $navigation-nav-button-background: $base-accent-color;
  $navigation-nav-button-background-hover: lighten($navigation-background, 10);
  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
  $navigation-search-background: lighten($navigation-background, 5);
  $navigation-search-border: 1px solid darken($navigation-background, 5);
  $navigation-active-link-color: transparentize(white, 0.5);
  $navigation-submenu-padding: 1em;
  $navigation-submenu-width: 12em;
  $horizontal-bar-mode: $large-screen;

  background-color: $navigation-background;
  border-bottom: 1px solid darken($navigation-background, 10);
  height: $navigation-height;
  width: 100%;
  z-index: 999;

  .navigation-wrapper {
    @include clearfix;
    @include outer-container;
    position: relative;
    z-index: 9999;
  }

  .logo {
    float: left;    
    max-height: $navigation-height;
    padding-left: $navigation-padding;
    padding-right: 2em;

    img {
      max-height: $navigation-height;
      padding: .8em 0;
    }
  }

  // Mobile view

  .navigation-menu-button {
    color: $navigation-color;
    display: block;
    float: right;
    font-family: $sans-serif;
    font-weight: 700;
    line-height: $navigation-height;
    margin: 0;
    padding-right: 1em;
    text-transform: uppercase;

    @include media ($horizontal-bar-mode) {
      display: none;
    }

    &:hover {
      color: $navigation-color-hover;
    }
  }

  // Nav menu

  .nav {
    z-index: 9999999;
    float: none;
    @include media ($horizontal-bar-mode) {
      float: left;
    }
  }

  ul#navigation-menu {    
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;

    @include media ($horizontal-bar-mode) {
      display: inline;
      margin: 0;
      padding: 0;
    }
  }

  // The nav items

  ul li.nav-link {
    background: $navigation-background;
    display: block;
    line-height: $navigation-height;
    overflow: hidden;
    padding-right: .8em;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @include media ($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $navigation-height;
      text-decoration: none;
      width: auto;
    }

    a {
      color: $navigation-color;
      display: inline-block;
      font-weight: 400;

      @include media ($horizontal-bar-mode) {
        padding-right: 1em;
      }

      &:hover {
        color: $navigation-color-hover;
      }
    }
  }

  .active-nav-item a {
    border-bottom: 1px solid $navigation-active-link-color;
    padding-bottom: 3px;
  }

  // Sub menus

  li.more.nav-link {
    padding-right: 0;

    @include media($large-screen) {
      padding-right: $navigation-submenu-padding;
    }

    > ul > li:first-child a  {
      padding-top: 1em;
    }

    a {
      margin-right: $navigation-submenu-padding;
    }

    > a {
      padding-right: 0.6em;
    }

    > a:after {
      @include position(absolute, auto -.4em auto auto);
      content: '\25BE';
      color: $navigation-color;
    }
  }

  li.more {
    overflow: visible;
    padding-right: 0;

    a {
      padding-right: .8em;
    }

    > a {
      padding-right: 1.6em;
      position: relative;

      @include media($large-screen) {
        margin-right: $navigation-submenu-padding;
      }

      &:after {
        content: '›';
        font-size: 1.2em;
        position: absolute;
        right: $navigation-submenu-padding / 2;
      }      
    }

    &:hover > .submenu {
      display: block;
    }

    @include media($horizontal-bar-mode) {
      padding-right: .8em;
      position: relative;
    }
  }

  ul.submenu {
    display: none;
    padding-left: 0;

    @include media($horizontal-bar-mode) {
      left: -$navigation-submenu-padding;
      position: absolute;
      top: 1.5em;
    }

    .submenu {
      @include media($horizontal-bar-mode) {
        left: $navigation-submenu-width - .2em;
        top: 0;
      }
    }

    li {
      display: block;
      padding-right: 0;

      @include media($horizontal-bar-mode) {
        line-height: $navigation-height / 1.3;

        &:first-child > a {
          border-top-left-radius: $base-border-radius;
          border-top-right-radius: $base-border-radius;
        }

        &:last-child > a {
          border-bottom-left-radius: $base-border-radius;
          border-bottom-right-radius: $base-border-radius;
          padding-bottom: .7em;
        }
      }

      a {
        background-color: darken($navigation-background, 3);
        display: inline-block;
        text-align: right;
        width: 100%;

        @include media($horizontal-bar-mode) {
          background-color: $navigation-background;
          padding-left: $navigation-submenu-padding;
          text-align: left;
          width: $navigation-submenu-width;
        }
      }
    }
  }

  // Elements on the far right

  .navigation-tools {
    @include clearfix;
    display: block;
    padding-right: $navigation-padding;
    padding-left: $navigation-padding/2;
    clear: both;
    background: #505050;

    @include media($large-screen) {
      background: transparent;
      float: right;
      clear: none;
    }
  }

  a.sign-up {
    margin-top: 1.2em;
    float: right;
    @include transition (all 0.2s ease-in-out);
    display: inline;
    background: $navigation-nav-button-background;
    border-radius: $base-border-radius; 
    color: white;
    font-size: .8em;  
    font-weight: 800;
    text-transform: uppercase;
    padding: .4em .5em;

    @include media($large-screen) {
      padding: .5em 1em;
    }

    &:hover {
      background: lighten($navigation-nav-button-background, 10);
    }
  }

  // Search bar

  .search-bar {
    $search-bar-border-color: $base-border-color;
    $search-bar-border: 1px solid $search-bar-border-color;
    $search-bar-background: lighten($search-bar-border-color, 10);

    padding: .85em .6em; 
    float: left;
    .search-and-submit {
      position: relative;

      input[type=search] {
        background: $navigation-search-background;
        border: $navigation-search-border;
        padding: .6em .8em;
        font-size: .9em;
        font-style: italic;
        color: $navigation-color;
        border-radius: $base-border-radius * 2;
        margin: 0;

        @include media($large-screen) {
          width: 100%;
        }
      }

      button[type=submit] {
        @include button(simple, lighten($navigation-search-background, 10));
        position: absolute;
        top: 0.3em;
        right: 0.3em;
        bottom: 0.3em;
        left: auto;
        outline: none;
        padding: 0 15px;

        img {
          height: 12px;
          opacity: .7;
        }
      }
    }

    @include media($horizontal-bar-mode) {
      width: 16em;
      position: relative; 
      display: inline-block;

      input {
        @include box-sizing(border-box);
        display: block;
      }
    }
  }
}

JS：（在这种情况下不需要）

$(document).ready(function() {
  var menu = $('#navigation-menu');
  var menuToggle = $('#js-mobile-menu');
  var signUp = $('.sign-up');

  $(menuToggle).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle(function(){
      if(menu.is(':hidden')) {
        menu.removeAttr('style');
      }
    });
  });

  // underline under the active nav item
  $(".nav .nav-link").click(function() {
    $(".nav .nav-link").each(function() {
      $(this).removeClass("active-nav-item");
    });
    $(this).addClass("active-nav-item");
    $(".nav .more").removeClass("active-nav-item");
  });
});