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

甚至尝试直接用定位ul

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

但什么也没发生。我没有看到任何错误，但最后一个子菜单没有移动。我如何使最后一个子菜单得到位置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

i通过使用within:设置正确的容器，使用默认的碰撞选项（flip）可以获得这一权限。没有指定它默认为window。一旦我把它放在容器里，我不想溢出，它就完美地工作了。有效的代码是：

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

感谢