下拉菜单增加了div的长度而不是弹出

Question

我在我的网站中使用https://getmdl.io/，我有一个标题。我的问题是，当我按下下拉菜单而不是弹出的下拉菜单时，它会增加标题的大小并显示滚动条。你有什么建议吗？

Having clicked dropdown menu

代码：

<div class="mdl-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">MyPage.net</a>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
          <input class="mdl-textfield__input" id="country" name="country" value="Belarus" type="text" readonly tabIndex="-1" data-val="BLR"/>
          <label class="mdl-textfield__label" for="country">Country</label>
          <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country">
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
          </ul>
        </div>
      </nav>