Html 选项元素大于选择框-如何使选项列表向左展开？

我目前面临的问题真的很难描述，但也许你可以从下面的截图中看出这个想法。设置是一个选择框（通过css限制宽度）和一些选项元素。如果一个选项的宽度大于“选择”框的宽度，则默认情况下，整个对象将按如下方式渲染：

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

你知道我怎样才能做到这一点吗

---

编辑：下面是我正在使用的标记：

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

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

div:hover ul{display:block；}
div ul{/*用于放置的自定义css*/}
1
1

你能包含当前版本的HTML吗？@JohnFx我对标记进行了修改，请参阅我文章中的链接！