选项在HTML选择元素中的位置

我有一个包含选项的元素。该元件的宽度为150px，但有些选项更宽。因此，渲染时，浏览器会在右侧显示溢出。如何使选项列表向左溢出 select位于div的右上角，从左到外溢出

谢谢

<select id="MySelect">
      <option value="60" selected="selected"></option><option value="-60">(UTC-01:00) Azores</option>
      <option value="-60">(UTC-01:00) Cape Verde Is.</option><option value="0">(UTC) Casablanca</option>
      <option value="0">(UTC) Dublin, Edinburgh, Lisbon, London</option><option value="0">(UTC) Monrovia, Reykjavik</option>
      <option value="60">(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
      <option value="60">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option>
      <option value="60">(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
      <option value="60">(UTC+01:00) West Central Africa</option>
      <option value="120">(UTC+01:00) Windhoek</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​#MySelect{
    margin-top:20px;
    margin-left:200px;
    width:150px;}​​​

（UTC-01:00）亚速尔群岛
（UTC-01:00）佛得角是（UTC）卡萨布兰卡
（UTC）都柏林、爱丁堡、里斯本、伦敦（UTC）蒙罗维亚、雷克雅未克
（UTC+01:00）贝尔格莱德、布拉迪斯拉发、布达佩斯、卢布尔雅那、布拉格
（UTC+01:00）布鲁塞尔、哥本哈根、马德里、巴黎
（UTC+01:00）萨拉热窝、斯科普里、华沙、萨格勒布
（UTC+01:00）中西部非洲
（UTC+01:00）温得和克
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
​#我的选择{
边缘顶部：20px；
左边距：200px；
宽度：150px；}​​​

您可以使用

<select id="MySelect" dir="rtl">

这是一个相当粗糙的方法，但它的工作。我想不出别的办法了

#MySelect{
    margin-top:20px;
    margin-left:300px;
    width:150px;
    direction: rtl;
}