검색 및 드롭 다운 버튼으로 탐색 바를 구체화 하시겠습니까?

7 년 만에 내 세 번째 질문에 환영합니다. 나는 숨어있는 것을 꽤 잘했다.검색 및 드롭 다운 버튼으로 탐색 바를 구체화 하시겠습니까?

저는 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>

. 오른쪽에있는 드롭 다운은 내비게이션 막대 내부에 있어야하며, 클릭하면 로그 아웃이 아래에 나타납니다. 두 장의 사진에서 볼 수 있듯이, 전체 막대가 흰색으로 바뀌지 않습니다. (나는 col 10에서 얻었 기 때문에 추측하고 있습니다.) 드롭 다운이 아래에서 떨어지는 것이 아니라 오히려 위에 있습니다.