使用搜索和下拉按钮实现导航栏？

Question

欢迎来到我7年来关于SO的第三个问题。我一直擅长潜伏。

Anywho，我正在使用Materialise框架并尝试在右侧创建一个带有垂直下拉列表的搜索导航栏。以下是我的代码目前的样子：

<nav>
  <div class="nav-wrapper">
    <div class="row">
      <div class="col s10">
        <form>
          <div class="input-field">
            <input id="search" type="search" />
            <label for="search"><i class="material-icons">search</i></label>
          </div>
        </form>
      </div>
      <div class="col s2">
        <ul class="right">
          <!-- Dropdown Trigger -->
          <i class="material-icons dropdown-button btn" href='#' data-activates='dropdown1'>reorder</i></a>

          <!-- Dropdown Structure -->
          <ul id='dropdown1' class='dropdown-content'>
            <li><a href="/">Logout</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</nav>

我希望导航栏是透明的，直到我点击它，当整个条形变为白色搜索功能时。右侧的下拉列表应位于导航栏内，当我点击它时，Logout将显示在下方。正如你从两张照片中看到的那样，整个酒吧都没有变白（我假设是因为我已经把它放在了第10条），而且下拉列表也没有下降，而是在...之上。

感谢您提供任何帮助，如果您有任何其他想要查看的代码，请与我们联系！

Answer 1

要获得下面的下拉列表，您需要添加 data-beloworigin="true" 下拉触发器。

而且，为了让它在导航中，你需要给它position:absolute;

这是example