位置div与另一个具有响应箭头的div相关

Question

我正在尝试制作与div相关的响应式菜单，正如您在我的jsfiddle演示链接中看到的那样， 我的问题与箭头和菜单位置，我需要添加类，如果菜单最接近容器的右边框，甚至到左边框或顶部边框或底部边框，我的意思是改变菜单的位置和更改箭头位置，也使菜单永远不会走出集装箱..

Demo

这是我的代码：

var popupid,gid = 0;
$(".box").on("click",function(e){
    e.preventDefault();

        placeholder();

    var self = $(this),
            pos = self.position(),
            selftop = pos.top,
            selfleft = pos.left,
            width = self.outerWidth(),
            popup_Options = self.find(".popup");

        popupid = 'placeholder-' + gid++;
        popup_Options
            .attr('placeholder', popupid)
            .before('<div class="placeholder ' + popupid + '"></div>') 
            .appendTo('.Container');   

            popup_Options.css({
                position: "absolute",
                top: selftop + "px",
                left: (selfleft + width)  + 20 +"px"
            }).show();

    e.stopPropagation();
});

$('html').on('click',function(e)
{
    placeholder();
});

function placeholder()
{
            // Move back out of container
        $('div[placeholder="'+popupid+'"]')
            .appendTo('.placeholder.' + popupid)  
            .unwrap()                               
            .removeAttr('placeholder')
            .hide(); // Unset placeholder data

}