將下拉內容從其父項中分解出來

Question

如果查看下面的jsfiddle，它有3個下拉菜單（DROP1，DROP2，DROP3）。第一個的內容粘貼到左邊緣，然而第二個和第三個內容從它們各自的按鈕按鈕的下方開始。

的jsfiddle：http://jsfiddle.net/6a3eZ/73/

的問題是：如何使第二和第三下拉菜單內容堅持左邊緣，以及（不應用不同的風格將其與陰性切緣）。

非常感謝。

jQuery(document).ready(function ($) { 
    jQuery('.menu ul').slideUp(0); 

    jQuery('.menu li.sub').click(function() { 
     var target = jQuery(this).children('a'); 
     if(target.hasClass('menu-expanded')){ 
      target.removeClass('menu-expanded'); 
     }else{ 
      jQuery('.menu-item > a').removeClass('menu-expanded'); 
      target.addClass('menu-expanded'); 
     } 
     jQuery(this).find('ul:first') 
        .slideToggle(400) 
        .end() 
        .siblings('li') 
        .find('ul') 
        .slideUp(400); 
    }); 
}); 

Answer 1

New Fiddle

通過添加position: absolute和left: 0到子菜單，它堅持左側。

ul.sub-menu { 
    position: absolute; 
    left: 0; 
    ... 
} 

發生這種情況，因爲它的相對於具有fixed，relative或absolute定位下一個父容器中。那就是#menu。

問題是，子菜單被取出正常流程，並且底部的三個菜單項目正在重疊。