Select Drop-Up Dropdown

Question

The <select><option>foo</option></select> drop-down menu is too close to the bottom of the page. I would like the dropdown to drop out. I searched, but only could find information on the navigation menus. I tried to give <select class="select-store"> top: 100% and bottom: 100% position: absolute - this is what I saw for the drop-down menus of the navigation menu to “drop out” without prevailing. Is it possible? Thanks guys in advance, the 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 behavior of an element is determined by the browser. Only it detects an overflow outside the viewport and sometimes moves the list. You cannot control this directly.

Now, if you use a simulated SELECT with a script, you can detect an overflow in the JS code and change it accordingly.