Dropdown menu not anchored below field
<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>