материализовать навигационную панель с кнопкой поиска и выпадающего меню?

Question

Добро пожаловать в мой третий вопрос о SO в течение 7 лет. Я довольно хорошо скрывался.

Anywho, я работаю с Framework 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 s10), и выпадающее меню не падает ниже, а скорее поверх.

Спасибо за любую помощь, и, пожалуйста, дайте мне знать, если есть любой другой код, который вы хотели бы видеть!

Answer 1

Чтобы получить раскрывающийся список ниже, вам нужно добавить data-beloworigin="true" в раскрывающийся список.

И, чтобы получить его в Nav вы должны дать ему position:absolute;

Вот example