我有一个水平CSS下拉菜单在我的网站的标题。菜单也浮动在标题的右边。我有一个问题,当你把鼠标放在菜单上,你会得到下拉菜单,如果下拉菜单有子菜单,子菜单有子菜单,菜单开始完全飞出屏幕,到你看不到他们的地方,你得到一个水平滚动条。这个菜单是用这样的列表项创建的(为了简洁,我删除了大量的项目):
<nav id="main-menu" role="navigation">
<div class="menu-navigation-container">
<ul class="menu">
<li class="last expanded">
<a href="/content/clients" title="Clients">Clients</a>
<ul class="menu">
<li class="first expanded">
<a href="/content/information-technology-client" title="IT Client Services">Information Technology</a>
<ul class="menu">
<li class="first expanded">
<a href="/content/enterprise-applications-client" title="Client Enterprise Applications">Enterprise Applications</a>
<ul class="menu">
<li class="first leaf"><a href="/content/oracle-client" title="Oracle Client Services">Oracle</a></li>
<li class="leaf"><a href="/content/peoplesoft-client" title="PeopleSoft Client Services">PeopleSoft</a></li>
<li class="leaf"><a href="/content/sap-client" title="SAP Client Services">SAP</a></li>
<li class="leaf"><a href="/content/lawson-client" title="Lawson Cilent Services">Lawson</a></li>
<li class="leaf"><a href="/content/hyperion-client" title="Customer Relationship Management Client Services">Hyperion</a></li>
<li class="leaf"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</nav>
<!-- end main-menu -->
所以基本上当你到达"企业应用程序"菜单飞出屏幕,所以你甚至看不到它。我对菜单的HTML控制有限,因为它是由系统生成的。我不能创建额外的ID或类。我只能用我在这里展示的东西。然而,我可以将jQuery添加到自定义文件中来解决这个问题。有人能想到有什么jQuery(或者只是普通的javaScript)可以防止列表项从屏幕上飞出来吗?此外,这是一个内部网应用程序,所以很遗憾,我不能给你一个演示。哦,我确实可以访问外部CSS文件,所以我可以添加额外的CSS,我只是不能添加/编辑菜单本身的ID和类。
谢谢
我最终只是这样做,它似乎工作。
$('#main-menu li').mouseenter(function() {
//make sure menu does not fly off the right of the screen
if ($(this).children('ul').offset().left + 200 > $(window).width()) {
$(this).children('ul').css('right', 180);
}
});
可能使用jQuery滚动当你悬停在下拉菜单?
|
V
<li class="leaf" onHover="$(this).scroll();"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>