Option element bigger than select box - how to get the options list to expand to the left?

The problem I am currently facing is really hard to describe, but maybe you can the idea from the following screenshots. The setup is a select box (width limited via css) and some option elements inside. If one option's width is greater than the width of the select box, the 开发者_如何学JAVAwhole thing gets rendered like this by default:

And this is how I want it to be displayed (the red box being the options):

Any idea how I can achieve this?

EDIT: Here is a fiddle with the markup I am using: http://jsfiddle.net/dCmZ2/

You don't have much control over a browser's render of a select box. Just think about mobile devices like the iPhone. Here the select list takes over half the phone screen and is custom rendered. If you want this level of control then you will need to roll your own custom select box.

div:hover ul { display: block; }
div ul { /* custom css for placement */ }
<div>
   <ul><li>1</li><li>1</li></ul>
</div>