下拉菜單CSS查詢

Question

我在設計一個下拉菜單，子菜單是左對齊文本的標準垂直列表。我希望最後2個菜單項具有右對齊的文本，否則它們會離開屏幕邊緣，因爲子菜單文本比菜單文本長。

CSS：

.menu    {width: 1200px; margin: 0 auto; text-align: center;} 
.menu ul   {display: none;} 
.menu li   {display: inline-block; position: relative;} 
.menu li a   {display: block; font-size: 12px; color: #fff; height: 50px; line-height: 50px; padding: 0 22px;} 
.menu li a:hover  {background: #34556c;} 
.menu li:hover ul  {display: block; position: absolute; top: 100%; left: 0; background: #426985; padding-bottom: 5px;} 
.menu li ul li   {display: block;} 
.menu li ul li a  {height: 20px; line-height: 20px; padding: 3px 85px 3px 20px; white-space: nowrap; text-align: left; } 
.menu li#menu-item-133:hover ul, .menu li#menu-item-140:hover ul {right: 0;} 
.menu li#menu-item-133 ul li a, .menu li#menu-item-140 ul li a  {text-align: right; padding: 3px 20px 3px 85px;} 

這似乎並不工作，因爲子菜單似乎左邊開始：0，並在右側結束：0，它不會溢出留給文本以適應。

可以在這裏看到：http://tinyurl.com/loamosd（變相的URL，因爲它是客戶端服務器的IP）。

謝謝

Answer 1

我不得不重置原來的左：0使用左：初始;以及添加權利：0;