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" } }); 
}); 

感謝