导航未按预期显示

Question

我正在修改一个小的布尔马导航，由于某种原因，当我调整屏幕大小时，它不想显示在下拉菜单中。我究竟做错了什么？这是我的代码：

html {
  overflow: hidden;
}

canvas {
  border-radius: 3px;
  border: 1px solid #000;
  margin: 10px;
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<nav class="navbar is-transparent">
  <div class="navbar-brand">
    <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navbarExampleTransparentExample" class="navbar-menu">
    <div class="navbar-start">


      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="/documentation/overview/start/">
          More
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/components/breadcrumb/">
            Components
          </a>

        </div>

      </div>

      <a class="navbar-item" href="https://bulma.io/">
        1
      </a>
      <a class="navbar-item" href="https://bulma.io/">
        2
      </a>
      <a class="navbar-item" href="https://bulma.io/">
        3
      </a>

      <div class="navbar-item">
        <div class="select">
          <select>
            <option>Fonts</option>
            <option>Options</option>
          </select>
        </div>


      </div>


      <div class="navbar-item">
        <div class="field has-addons">
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
            </a>
          </p>
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
            </a>
          </p>
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-underline"></i>
      </span>
            </a>
          </p>
        </div>


      </div>

      <div class="navbar-item">
        <div class="field has-addons">
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
            </a>
          </p>
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
            </a>
          </p>
          <p class="control">
            <a class="button">
              <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
            </a>
          </p>
        </div>
      </div>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="/documentation/overview/start/">
          More
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item" href="https://bulma.io/documentation/components/breadcrumb/">
            Components
          </a>

        </div>

      </div>

    </div>


    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field is-grouped">
          <!--  <p class="control">
            <a class="button" href="#">
                <span class="icon">
                  <i class="fas fa-at"></i>
                </span>
                <span>Update Email</span>
              </a>
          </p> -->

          <p class="control">
            <a class="button is-link" href="#">
              <span>Some Button</span>

            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

<canvas></canvas>

Here is my JSFiddle，以便您可以看到调整大小的含义（不确定是否可以使用SO编辑器调整窗口大小）。

谢谢。