选项元素大于选择框 - 如何让选项列表向左扩展？

Question

我目前面临的问题很难描述，但也许您可以从以下屏幕截图中了解。设置是一个选择框（宽度受限于css）和一些选项元素。如果一个选项的宽度大于选择框的宽度，则默认情况下整个事件都会像这样呈现：

这就是我希望它显示的方式（红色框是选项）：

知道如何实现这个目标吗？

编辑：以下是我正在使用的标记的小提琴：http://jsfiddle.net/dCmZ2/

Answer 1

您无法控制浏览器的选择框渲染。想想像iPhone这样的移动设备。这里的选择列表占据了手机屏幕的一半，并且是自定义渲染的。如果您想要这种级别的控制，那么您将需要滚动自己的自定义选择框。

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