jquery - CSS & Jquery 下拉菜单 : the third level that 'over-passes' at the right edge of window

Question

我对下拉菜单的第三级有问题，当你将鼠标悬停在它的父级时，它会“越过”文档窗口的右边缘，如果你将鼠标悬停在此处，你会明白我的意思 '账户' -> '管理',

http://ec-ener.eu/dump/index1.php

我希望第三层在“自动检测”到窗口边缘的尽头时“ float ”到其父级的左侧，所以布局应该是这样的，

http://ec-ener.eu/dump/index2.php

我通过手动放置一个类来改变第三层的位置，然后将其左侧位置调整为 left:-102%;在 CSS 中。

在实际情况下，我无法手动放入那个类，所以我想我必须使用 Jquery 来帮助我“自动检测”，然后添加那个特定的类来调整位置。

这可能吗？请问有什么想法和提示吗？

谢谢，刘

Answer 1

这有帮助吗？

$("#menu>ul>ul>li").each(function() {
  pos = $(this).offset();
  if(pos.left > $(window).width()+window.pageXOffset-$(this).width()) {
    pos.left -= $(this).width();
  }
  $(this).offset(pos);
});

或

$("#menu>ul>ul>li").each(function() {
  pos = $(this).offset();
  if(pos.left > $(window).width()+window.pageXOffset-$(this).width()) {
    $(this).addClass("overpass");
  }
});