jquery菜单小部件位置最后子菜单不同

Question

我使用jquery ui菜单小部件来制作垂直子菜单的水平顶级菜单，该子菜单下降到悬停的顶级项目下方。子菜单与顶层项目左对齐。对前5项工作正常，但最后一项在子菜单中有一些长项，比顶层项长，所以子菜单伸出容器的右侧。我想只将最后一个子菜单与其父项对齐。

菜单与此创建：

$(function() { 
    $("#main-nav").menu({ icons: { submenu: "ui-icon-blank" }, 
          position: { my: "left-8 top", at: "left bottom" } }); 
}); 

，做一切恰到好处除了最后一个子菜单。我已经尝试添加

$("#sub-about").menu("option", "position", { my: "right+8 top", at: "right bottom" }); 

和

$("#sub-about").position({ my: "right+8 top", at: "right bottom"}); 

，甚至试图只是

$("#sub-about").css("left", -100); 

直接定位UL，但没有任何反应。我没有看到任何错误，但最后一个子菜单不动。我怎样才能使刚刚过去的子菜单中获得位置my: "right+8 top", at: "right bottom"

HTML是这样的：

<div id="main-nav-container"><!-- // start nav 118439, main --> 
<ul id="main-nav"> 
<li><a>solutions</a> 
<!-- // start subnav of item 693, nav 118439 --> 
<ul class="solutions"> 
<li><a href="international-data-acquisition.htm">International Data Acquisition</a></li> 
<li><a href="us-high-volume-marketer.htm">US High Volume Marketing</a></li> 
<li><a href="data-enrichment-data-append.htm">Enrichment & Append Services</a></li> 
<li><a href="data-compliance-services.htm">Data Compliance Services</a></li> 
<li><a href="global-market-intelligence.htm">Global Market Intelligence</a></li> 
</ul> 
<!-- // end subnav of item 693, nav 118439 --> 
</li> 
<li><a>expertise</a> 
<!-- // start subnav of item 695, nav 118439 --> 
<ul class="expertise"> 
<li><a href="case-studies.htm">Case Studies</a></li> 
<li><a href="data-sourcing.htm">Data Sourcing</a></li> 
<li><a href="global-projects.htm">Global Projects</a></li> 
<li class="no-hands"><a>Industry Expertise</a></li> 
<li class="inset"><a href="expertise-automotive.htm">Automotive</a></li> 
<li class="inset"><a href="expertise-financial-services.htm">Financial Services</a></li> 
<li class="inset"><a href="expertise-technology.htm">High Tech</a></li> 
<li class="inset"><a href="expertise-insurance.htm">Insurance</a></li> 
</ul> 
<!-- // end subnav of item 695, nav 118439 --> 
</li> 
<li><a>resources</a> 
<!-- // start subnav of item 697, nav 118439 --> 
<ul class="resources"> 
<li><a href="data-catalogs.htm">Data Catalogs</a></li> 
<li><a href="gmdi-reports.htm">GMDI Reports</a></li> 
<li><a href="newsletters.htm">Newsletters</a></li> 
<li><a href="events.htm">Events</a></li> 
</ul> 
<!-- // end subnav of item 697, nav 118439 --> 
</li> 
<li><a>clients</a> 
<!-- // start subnav of item 699, nav 118439 --> 
<ul class="clients"> 
<li><a href="clients.htm">Clients</a></li> 
<li><a href="case-studies.htm">Case Studies</a></li> 
</ul> 
<!-- // end subnav of item 699, nav 118439 --> 
</li> 
<li id="top-about"><a>about</a> 
<!-- // start subnav of item 701, nav 118439 --> 
<ul id="sub-about" class="about"> 
<li><a href="news-press.htm">News & Press</a></li> 
<li><a href="leadership.htm">Leadership Team</a></li> 
<li><a href="careers.htm">Careers</a></li> 
</ul> 
<!-- // end subnav of item 701, nav 118439 --> 
</li> 
</ul> 
<!-- // end nav 118439, main --> 
</div> <!-- #main-nav-container --> 

感谢

Answer 1

我能够通过设置正确使用默认碰撞选项（翻转）得到这个权利容器与within:。没有指定它是默认窗口。一旦我将它设置到容器，我不想溢出它完美的工作。该工程的代码是：

$(function() { 
    $("#main-nav").menu({ icons: { submenu: "ui-icon-blank" }, 
    position: { my: "left-12 top", at: "left bottom", within: "#slideshow-container" } }); 
}); 

感谢