HTML выберите тег не выпадающий вниз для отображения параметров

Question

Тэг выбора внизу, кажется, не открывает опции при нажатии, а не вверху. Когда вы щелкаете по нему обычным образом, должно выпадающее меню опций. Даже когда я изменил значения в нижнем теге выбора, чтобы он соответствовал верхнему, у него все еще была та же проблема. CSS должно влиять только на поля, но я вставляю их на всякий случай, если это основа проблемы.

<style>
  .select{
    float: left;
    width: 30%;
    padding-top: 0;
    margin-bottom: 4%;
  }

  #alphabet{
    margin-left: 4%;
    margin-right: 4%;
  }
</style>


<div id="alphabet">
   <div class="select">
   <select>
     <option value="0">Select:</option>
     <option value="1">A</option>
     <option value="2">B</option>
     <option value="3">C</option>
     <option value="4">D</option>
     <option value="5">E</option>
     <option value="6">F</option>
     <option value="7">G</option>
     <option value="8">H</option>
   </select>
   </div>

   <div class="select">
    <select>
      <option value="9">Select:</option>
      <option value="10">A</option>
      <option value="11">B</option>
      <option value="12">C</option>
      <option value="13">D</option>
      <option value="14">E</option>
      <option value="15">F</option>
      <option value="16">G</option>
      <option value="17">H</option>
    </select>
    </div>
</div> <!-- end of alphabet -->