title: Dropdown menu not anchored below field
body: <p>I've the following, very basic code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="dir"&gt;
          &lt;option value="N"&gt;N&lt;/option&gt;
          &lt;option value="S"&gt;S&lt;/option&gt;
          &lt;option value="E"&gt;E&lt;/option&gt;
          &lt;option value="W"&gt;W&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My system displays HTML using IE. In the displayed page:</p>
  
  <ul>
  <li>On loading the page, the initial value displayed in the field is <strong>N</strong>.</li>
  <li>I click the field. The dropdown menu appears with the <strong>N</strong> option hovering over the field. The <strong>S</strong>, <strong>E</strong> &amp; <strong>W</strong> options are <strong>below</strong> the field.</li>
  <li>I click S. The dropdown menu disappears, and the value displayed in the field is now <strong>S</strong>.</li>
  <li>I click the field again. The dropdown menu appears with the <strong>S</strong> option hovering over the field. The <strong>N</strong> option is <strong>above</strong> the field, while the <strong>E</strong> &amp; <strong>W</strong> options remain <strong>below</strong> the field.</li>
  </ul>
  
  <p>This is not how I expected dropdown menus to display. How do I change the code such that the entire dropdown menu is <strong>below</strong> the field whenever it's displayed, neither partially hovering over the field nor above it?</p>