CSS & Jquery drop down menu: the third level that 'over-passes' at the right edge of window

Question

I have problem with the third level of a drop down menu, which 'over-passes' the right edge of the document window when you hover it's parent, you have a look here to see what I mean, if you hover 'Accounts' -> 'Manage',

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

I want that third level to 'float' to its parent's left when it 'auto-detects' there is the end of the edge of window, so the layout would be something like this,

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

I changed the position of that third level by putting a class manually, then adjust its left position to left:-102%; in the css.

In a practical situation, I won't be able to put that class in manually, so I think I have to use Jquery to help me to 'auto-detects' and then add that specific class to adjust the position.

Is it possible? Any ideas and hints please?

Thanks, Lau

Answer 1

Could this help?

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

or

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