検索バーとドロップダウンボタンを使ってナビバーを実現しますか？

Question

7年ぶりに私の3番目の質問にようこそ。私はかなり潜んでいた。

私はMaterializeフレームワークを使用しており、右側に垂直のドロップダウンを持つ検索ナビゲーションバーを作成しようとしています。ここに私のコードは、現時点では次のようになります。

<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が下に表示されます。 2枚の写真からわかるように、バー全体が白くなっていません（私はcol s10でそれを得ていると仮定しています）。ドロップダウンは下に落ちるのではなく、上にあります。

​​

任意の助けをありがとう、そしてあなたが見たい、他のコードがありますなら、私に教えてください！

Answer 1

下記のドロップダウンを取得するには、ドロップダウントリガーに data-beloworigin="true"を追加する必要があります。

そして、あなたはそれをposition:absolute;

を与える必要がNAVの内側にそれを得るためにここにhttps://jsfiddle.net/link2pk/qty77hec/5/ようexample