html - Select drop-down list possible to "Drop-Up"

Question

The <select><option>foo</option></select> drop-down is too close to the bottom of the page. I would like the drop-down to "drop-up". I have been searching but only able to pull up information on navigation menus. I tried giving the <select class="select-store"> a top:100% and bottom:100% being position:absolute which is what I saw for navigation menu dropdowns to "drop-up" without prevail. Is this possible? Thank you guys in advance, code is below;

HTML

<select class="select-store" onchange="document.location.href=this.value">
  <option value="/">Store Finder</option>
  <option value="/foo">foo</option>
  <option value="/beta">beta</option>
</select>

CSS

#finder .select-store{
  background: url("/images/storefinder_bg.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #5B5A5A;
  font-family: UNIV-C,Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: normal;
  height: 32px;
  line-height: 16px;
  padding: 3px;
  vertical-align: middle;
  width: 186px;
}

Answer 1

SELECT element behaviour is determined by the browser. It alone detects overflow outside of the viewport and will sometimes reposition the list. You can't control this directly.

Now if you use a script-based simulated SELECT, the you can detect overflow in your the JS code and reposition accordingly.