title: HTML Dropdown Returns Blank
body: <p>For some reason, my HTML dropdown menu is returning completely blank values. However, you can see the values when you hover your mouse over them. My code is at my GitHub here: <a href="https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html" rel="nofollow noreferrer">https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html</a></p>
  
  <p>EDIT: Sorry, got the wrong link. I fixed it now.</p>
  
  <p>Also, for the specific code with my dropdown:</p>
  
  <pre><code>&lt;div translate="no" class="compact marquee" id="div_language"&gt;
            &lt;select id="select_language" onchange="updateCountry()"&gt;
              &lt;option value="0"&gt;Afrikaans&lt;/option&gt;&lt;option value="1"&gt;Bahasa Indonesia&lt;/option&gt;&lt;option value="2"&gt;Bahasa Melayu&lt;/option&gt;&lt;option value="3"&gt;Català&lt;/option&gt;&lt;option value="4"&gt;Čeština&lt;/option&gt;&lt;option value="5"&gt;Dansk&lt;/option&gt;&lt;option value="6"&gt;Deutsch&lt;/option&gt;&lt;option value="7"&gt;English&lt;/option&gt;&lt;option value="8"&gt;Español&lt;/option&gt;&lt;option value="9"&gt;Euskara&lt;/option&gt;&lt;option value="10"&gt;Filipino&lt;/option&gt;&lt;option value="11"&gt;Français&lt;/option&gt;&lt;option value="12"&gt;Galego&lt;/option&gt;&lt;option value="13"&gt;Hrvatski&lt;/option&gt;&lt;option value="14"&gt;IsiZulu&lt;/option&gt;&lt;option value="15"&gt;Íslenska&lt;/option&gt;&lt;option value="16"&gt;Italiano&lt;/option&gt;&lt;option value="17"&gt;Lietuvių&lt;/option&gt;&lt;option value="18"&gt;Magyar&lt;/option&gt;&lt;option value="19"&gt;Nederlands&lt;/option&gt;&lt;option value="20"&gt;Norsk bokmål&lt;/option&gt;&lt;option value="21"&gt;Polski&lt;/option&gt;&lt;option value="22"&gt;Português&lt;/option&gt;&lt;option value="23"&gt;Română&lt;/option&gt;&lt;option value="24"&gt;Slovenščina&lt;/option&gt;&lt;option value="25"&gt;Slovenčina&lt;/option&gt;&lt;option value="26"&gt;Suomi&lt;/option&gt;&lt;option value="27"&gt;Svenska&lt;/option&gt;&lt;option value="28"&gt;Tiếng Việt&lt;/option&gt;&lt;option value="29"&gt;Türkçe&lt;/option&gt;&lt;option value="30"&gt;Ελληνικά&lt;/option&gt;&lt;option value="31"&gt;български&lt;/option&gt;&lt;option value="32"&gt;Pусский&lt;/option&gt;&lt;option value="33"&gt;Српски&lt;/option&gt;&lt;option value="34"&gt;Українська&lt;/option&gt;&lt;option value="35"&gt;한국어&lt;/option&gt;&lt;option value="36"&gt;中文&lt;/option&gt;&lt;option value="37"&gt;日本語&lt;/option&gt;&lt;option value="38"&gt;हिन्दी&lt;/option&gt;&lt;option value="39"&gt;ภาษาไทย&lt;/option&gt;&lt;/select&gt;&amp;nbsp;&amp;nbsp; &lt;select id="select_dialect" style="visibility: visible;"&gt;
              &lt;option value="en-AU"&gt;Australia&lt;/option&gt;&lt;option value="en-CA"&gt;Canada&lt;/option&gt;&lt;option value="en-IN"&gt;India&lt;/option&gt;&lt;option value="en-NZ"&gt;New Zealand&lt;/option&gt;&lt;option value="en-ZA"&gt;South Africa&lt;/option&gt;&lt;option value="en-GB"&gt;United Kingdom&lt;/option&gt;&lt;option value="en-US"&gt;United States&lt;/option&gt;&lt;/select&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS code. Honestly, I don't find anything wrong with it. Is there something wrong with the CSS that makes the dropdown blank?</p>
  
  <pre><code>&lt;style&gt;
      .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
    .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
    .speech img {float: right; width: 40px }
    l {
     border: ipx solid black
     }
    /* Style the tabs */
  ul.tab {
     list-style-type: none;
     border-radius:10px;
     margin: 0;
     padding: 0;
     overflow: hidden;
     border: 1px solid #ccc;
     background-color: #f2f2f2;
  }
  /* Float the list items side by side */
  ul.tab li {float: left;}
  /* Style the links inside the list items */
  ul.tab li a {
     background-color:#d9d9d9;
     display: inline-block;
     color: black;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     transition: 0.3s;
     font-size: 17px;
  }
  /* Change background color of links on hover */
  ul.tab li a:hover {
     background-color:#999999 ;
  }
  /* Create an active/current tablink class */
  ul.tab li a:focus, .active {
     background-color: #ccc;
  }
  /* Style the tab content */
  .tabcontent {
     border-radius:10px;
     display: none;
     padding: 6px 12px;
     border: 1px solid #ccc;
     border-top: none;
  }
    /* All content below pertains to the function of the tabs in an "accordian" style */
  button.accordion {
     border-radius:26px;
     background-color: #eee;
     color: #444;
     cursor: pointer;
     padding: 18px;
     width: 100%;
     border: none;
     text-align: left;
     outline: none;
     font-size: 15px;
     transition: 0.4s;
  }
  button.accordion.active, button.accordion:hover {
     background-color: #ddd;
  }
  button.accordion:after {
     content: '&gt;&gt;';
     color: #777;
     font-weight: bold;
     float: right;
     margin-left: 5px;
  }
  button.accordion.active:after {
     content: "&lt;&lt;";
  }
  div.panel {
     padding: 0 18px;
     background-color: white;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
  }
  #info {
      font-size: 20px;
      }
      #div_start {
      float: right;
      }
      #headline {
      text-decoration: none
      }
      #results {
      font-size: 14px;
      font-weight: bold;
      border: 1px solid #ddd;
      padding: 15px;
      text-align: left;
      min-height: 150px;
      }
      #start_button {
      border: 0;
      background-color:transparent;
      padding: 0;
      }
      .interim {
      color: gray;
      }
      .final {
      color: black;
      padding-right: 3px;
      }
      .button {
      display: none;
      }
      .marquee {
      margin: 20px auto;
      }
      #buttons {
      margin: 10px 0;
      position: relative;
      top: -50px;
      }
      #copy {
      margin-top: 20px;
      }
      #copy &gt; div {
      display: none;
      margin: 0 70px;
      }
  body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
  .w3-row-padding img {margin-bottom: 12px}
  /* Set the width of the sidebar to 120px */
  .w3-sidebar {width: 120px;background: #222;}
  /* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
  #main {margin-left: 120px}
  /* Remove margins from "page content" on small screens */
  @media only screen and (max-width: 600px) {#main {margin-left: 0}}
  &lt;/style&gt;
  </code></pre>