CSS菜單Subnav顯示下方摺疊

Question

我有一個左側垂直CSS菜單，彈出右側的subnavs。

我的問題是，最後一個菜單項有許多subnavs導致它們顯示在窗口的下方。

是否有任何方式與CSS或jQuery來檢測是否會發生這種情況，並相應地調整位置，使所有的子菜單項可以看到？

這裏是（你可能需要調整窗口高度），以我的例子鏈接：

<!--demo is at following link--> 

http://jsfiddle.net/otcq2ne0/

Answer 1

下面是使用更新的jQuery：http://jsfiddle.net/otcq2ne0/1/

$('body').on('mouseenter mouseover', '.vmdrop', function() { 
    var subNav = $('.vmenu-dropdown', this); 

    if (subNav.length) { 
     var pos = subNav[0].getBoundingClientRect(); 
     if (pos.bottom > window.innerHeight) { 
      var threshold = pos.top; 
      var buffer = 10; 
      var diff = window.innerHeight - (pos.bottom + buffer); 

      if (Math.abs(diff) > threshold) { 
       diff = '-' + (threshold + buffer); 
      } 

      if (Math.abs(diff) > 0) { 
       subNav.css({ top: diff + 'px' }); 
      } 
     } 
    } 
});