与 Modernizr 一起使用时，Foundation/Bootstrap 下拉菜单在 Chrome 上不起作用答案

【问题标题】：Foundation/Bootstrap dropdowns not working on Chrome when used with Modernizr与 Modernizr 一起使用时，Foundation/Bootstrap 下拉菜单在 Chrome 上不起作用
【发布时间】：2014-10-17 20:30:10
【问题描述】：

我将 HTML5 Boilerplate 用于 zurb 基础 v5.4.6 项目。当我使用 Modernizr v2.8.3 时，除了下拉导航栏链接 （见附图） 之外，一切正常。这些链接应该在 hover 上显示。但是启用 Modernizr 后，它在这些浏览器上的行为方式如下：

Chrome v38.0.2125.104：即使点击也不显示
Firefox v31.0：点击显示
IE v11.0：点击显示

因此，没有观察到正常的“悬停显示”行为。请帮我看看这是怎么回事。

头部：

<meta charset="utf-8">
<title>testapp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/foundation/css/normalize.css"> 
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css"> 
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

身体：

<!--[if lt IE 10]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="top-bar">
  <ul class="title-area">
      <li class="name">
          <h1><a href="#" title="Home">Guitarbaba.in</a>
          </h1>
      </li>
  </ul>
  <section class="top-bar-section">
      <ul class="left">
          <li class="divider"></li>
          <li class="active"><a href="#" title="">Item 1</a>
          </li>
          <li class="divider"></li>
          <li><a href="#" title="">Item 2</a>
          </li>
          <li class="divider"></li>
          <li class="has-dropdown"><a href="#" title="">Item 3</a>
              <ul class="dropdown">
                  <li><a href="#" title="">Sub Item 1</a>
                  </li>
                  <li><a href="#" title="">Sub Item 2</a>
                  </li>
                  <li><a href="#" title="">Sub Item 3</a>
                  </li>
                  <li><a href="#" title="">Sub Item 4</a>
                  </li>
                  <li><a href="#" title="">Sub Item 5</a>
                  </li>
              </ul>
          </li>
      </ul>
  </section>
</nav>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X');ga('send','pageview');
</script>

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

【问题讨论】：

标签： javascript html css drop-down-menu zurb-foundation

【解决方案1】：

我遇到了同样的问题。对我来说似乎解决的问题（Linux，铬）是在导航的“顶栏”类之后添加data-topbar，如下所示：

<nav class="top-bar" data-topbar>

有关好的示例，请参阅：http://foundation.zurb.com/docs/components/topbar.html

【讨论】：