Расслоение CSS блоки щелкает

Question

У меня есть страница, которая выглядит следующим образом:

Активные «SORT BY ...» кнопка и неактивная кнопка рядом с ним, мне нужно, чтобы не прокручивать, когда я прокручивается в списке ниже. Для достижения этой цели у меня есть две бок боковой кнопки падает вниз codded так:

<!-- Start Drop Down Menu --> 
    <div class="row" style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;"> 

     <div class="col s6"> 
      <!-- Dropdown Trigger --> 
      <a class='dropdown-button btn' href='#' data-activates='dropdown1' style="width: 100%;">Sort By...</a> 

      <!-- Dropdown Structure --> 
      <ul id='dropdown1' class='dropdown-content'> 
       <li><a href="#!">Brewery</a></li> 
       <li><a href="#!">Rating</a></li> 
       <li><a href="#!">Style</a></li> 
      </ul> 
     </div> 

     <div class="col s6"> 
      <!-- Dropdown Trigger --> 
      <a class='dropdown-button btn disabled' href='#' data-activates='dropdown2' style="width: 100%;"></a> 

      <!-- Dropdown Structure --> 
      <ul id='none' class='dropdown-content'> 
       <li><a href="#!">All</a></li> 
       <li><a href="#!">Brewery</a></li> 
       <li><a href="#!">Rating</a></li> 
       <li><a href="#!">Style</a></li> 
      </ul> 
     </div> 


    </div> 

Как вы можете видеть в стиле части кода выше:

style="height: 300px; width: 100%; position: fixed; top: 74px; background: transparent; z-index:2; overflow: hidden;" 

я устанавливаю его и поместить его поэтому он не будет перемещаться, когда я прокручу список ниже. Возможно, вы смотрите на него и объясняете, почему у меня высота 300 пикселей, когда кнопки не такие большие ... Потому что, когда вы нажимаете кнопку, она открывается. Если у меня высота той же высоты, что и кнопка, то я вижу большую часть раскрывающегося списка, который открывается ... Я думал, что это исправить мои проблемы, но это приводит к моей текущей проблеме. Так как кнопка технически опускается на 300 пикселей, она перекрывает первые две записи в списке, что делает их не кликабельными. Причина. Я нажимаю на прозрачный CSS, который их покрывает.

Для списка, я добавил, что в этом Div с этим стилем:

<div style="height: 35px; position: relative; top:60px; z-index:1;"> 
     <div id="replace"> </div> 
    </div> 

Короче, как я могу иметь выпадающие кнопки штифта их расположения и по-прежнему могу быть видны при открытии, так и на в то же время все еще можно нажать на все мои записи в моем списке?

Answer 1

Вам не нужно устанавливать высоту вашего .row div на 300 пикселей. Вместо этого удалите переполнения: скрытый стиль, из-за чего ваши выпадающие списки будут отключены.

Кроме того, вы должны разбить свой CSS в отдельный файл, чтобы отделить стиль от контента.

Наконец, я бы добавил, что фон не должен быть прозрачным - попробуйте, вы увидите текст, прокручивающийся за кнопками.

.row { 
    background: #fff; 
    height: 35px; 
    width: 100%; 
    position: fixed; 
    z-index: 10; 
}