如何定位列表项到其父无序列表/ div的右侧？

Question

所以基本上，我在我的页面顶部的菜单：

| Menu 1 | Menu 2 | Menu 3 | Menu 4 | 
          Menu 4 Item 1 
          Menu 4 Item 2 
          Menu 4 Item 3 

但我想定位上一级菜单，使得这些菜单项不会延长通过屏幕，而是向后扩展，如：

| Menu 1 | Menu 2 | Menu 3 | Menu 4 | 
         Menu 4 Item 1 
         Menu 4 Item 2 
         Menu 4 Item 3 

也许我只是没有搜索正确的关键字，但我无法弄清楚如何做到这一点。下面是代码：

<div style="background: none repeat scroll 0 0 #383aff; clear: both; font-size: 13px; height: 36px; margin: auto; width: 100%;"> 
<ul style="margin: 0px; padding: 0px;"> 
<li>Menu Item 4 <ul style="display:none; position:absolute; z-index: 100;"> 
<li><a style="margin: 0px; padding: 0px;">Submenu Item 1</a></li> 
<li><a style="margin: 0px; padding: 0px;">Submenu Item 2</a></li> 
<li><a style="margin: 0px; padding: 0px;">Long Submenu Item ASDFASDFASDFASDFASDFASDFASDFASDF</a></li></ul></li> 
<li>Menu Item 2</li> 
<li>Menu Item 2</li> 
<li>Menu Item 1</li> 
</ul> 
</div> 

Thesetwo的问题是相似的，但不解决方案。

Answer 1

像这样的东西可能会奏效：

http://jsfiddle.net/mn6pj79L/

这只是改变了MainMenu的项目

ul { 
    width: 400px; 
    display: inline; 
    list-style-type: none; 
    position: relative; 
    padding-left: 1px; 
    margin-left: -3px; 
} 

ul li { 
    float: left; 
    width: 100px; 
    border: 1px solid black; 
    background-color: silver; 
} 

ul li ul { 
    width: 150px; 
    display: none; 
    position: absolute; 
    text-indent: 0px; 
    margin: 0px; 
    padding: 0px; 
} 

ul li ul li { 
    width: 150px; 
} 

ul li:last-child ul { 
    position: absolute; 
    right: 0px; 
} 

ul li:hover ul { 
    display: block; 
}