title: How would I control the position of a drop down select menu?
body: <p>I have a drop down select menu, and I wanted to know if there is a way to control the way in which the options expand? The default seems to go either way and depends on how many items are in the list.</p>
  
  <p>I would like to prevent the drop down options from displaying up and over the other form fields. When you select 'country' from the list, the menu expands downward (where I want it), but when you select an option from the 'state/region' field that has quite a few different choices (such as the UK) the menu expands up and over the other form fields, something I don't want. Anyway to fix this?</p>
  
  <p>Here is my CSS -----></p>
  
  <pre><code>#country {
      position:relative;
      background-image:url(../images/drop-down-selector.svg);
      background-position:260px, center;
      background-repeat:no-repeat;
      -webkit-appearance:none;
      -moz-appearance:none;
      box-shadow:0px 0px 0px 1px #b5e7ff;
      border:none;
      outline:none;
      left:2px;
      width:292px;
      height:47px;
      font-size:1.5em;
      font-family:'gotham-medium', arial, sans-serif;
      src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
      color:#5fccff;
      border-radius:0;
  }
  
  #state {
      position:relative;
      background-image:url(../images/drop-down-selector.svg);
      background-position:260px, center;
      background-repeat:no-repeat;
      -webkit-appearance:none;
      -moz-appearance:none;
      box-shadow:0px 0px 0px 1px #b5e7ff;
      border:none;
      outline:none;
      left:2px;
      width:292px;
      height:47px;
      font-size:1.5em;
      font-family:'gotham-medium', arial, sans-serif;
      src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
      color:#5fccff;
      border-radius:0;
  }
  </code></pre>
  
  <p>Additional code -----></p>
  
  <pre><code>&lt;select name="Country" id="country"&gt;
      &lt;option value=""&gt;-Country-&lt;/option&gt;
      &lt;option value="United States"&gt;United States&lt;/option&gt;
      &lt;option value="United Kingdom"&gt;United Kingdom&lt;/option&gt;
      &lt;option value="Canada"&gt;Canada&lt;/option&gt;
      &lt;option value="Australia"&gt;Australia&lt;/option&gt;
      &lt;option value="Brazil"&gt;Brazil&lt;/option&gt;
      &lt;option value="France"&gt;France&lt;/option&gt;
      &lt;option value="Italy"&gt;Italy&lt;/option&gt;
      &lt;option value="New Zealand"&gt;New Zealand&lt;/option&gt;
      &lt;option value="South Africa"&gt;South Africa&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>