JQueryui menu will not position properly

JQueryui menu will not position properly

I am attempting to create menus dynamically using JQueryUI menu widgets.
Plunker Example -- Dynamic Menu Creation with issues
The problem is that the menu is not positioning itself faithfully. It (the
menu) seems determined to always appear near the bottom of my html body on
the first click of my menu button click handler, and only on the second
click of the menu button handler will it appear in the appropriate
position, nestled to the bottom of my menu button. So, how do keep my menu
faithful to the menu button which I intended?


$(document).ready(function(){
$("#myTabs").tabs();
var $replaceMenu=$("<ul style='position:absolute;z-index:9999;'>" +
"<li><a href='#'>Replace Current</li>" +
"<li><a href='#'>Replace All</li>" +
"</ul>").menu();
var replaceMenuHandler=function(event){
$replaceMenu.position({
my: "left top",
at: "left bottom",
of: this
})
.on( "menuselect", function( event, ui ) {
var selectedReplaceOption=ui.item.text();
console.log(selectedReplaceOption);
$replaceMenu.hide();
}).show();
event.stopPropagation();
};
$replaceMenu.appendTo("#testMenu").hide();
$("#testMenu").on("click",replaceMenuHandler);
});