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

通过使用within:设置正确的容器，我可以使用默认的碰撞选项（翻转）来实现此目的。没有指定它是默认为窗口。一旦我将它设置到容器，我不想溢出它完美的工作。有效的代码是：

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

感谢

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

1 个答案: