How to float Dojo DropDownMenu over a table cell

http://stackoverflow.com/questions/13481898/how-to-float-dojo-dropdownmenu-over-a-table-cell

by amiramix

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/package/xstyle-0.0.5.js"></script>
<script src="http://amd.egoworx.com/package/put-selector-0.3.2.js"></script>
<script src="http://amd.egoworx.com/package/dgrid-0.3.3.js"></script>
<script src="http://amd.egoworx.com/package/data.js"></script>
<table id="table1">
    <tr>
        <td><a href="#" id="node11" class="dropNew">DropNew</a></td>
        <td>&nbsp;</td>        
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><a href="#" id="node22" class="dropNew">DropNew</a></td>        
    </tr>
    <tr>
        <td>&nbsp;</td><td>&nbsp;</td>        
    </tr>
</table>

CSS

body {
    padding: 30px;
}

td {
    border: 1px solid grey;
    min-width: 2em;
}

JavaScript

require([
    "dojo/query",
    "dijit/Menu",
    "dijit/MenuItem",
    "dojo/domReady!"
], function(
    query,
    Menu,
    MenuItem
) {
    
    var menu = new Menu({
        leftClickToOpen: true,
        targetNodeIds: ["table1"],
        selector: "a.dropNew"
    });
    menu.addChild(new MenuItem({
        label: "Cut",
        iconClass: "dijitEditorIcon dijitEditorIconCut",
        onClick: function(evt){
            var node = this.getParent().currentTarget;
            console.log("menu clicked for node: ", node);
        }
    }));
    menu.addChild(new MenuItem({
        label: "Copy",
        iconClass: "dijitEditorIcon dijitEditorIconCopy"
    }));
    menu.addChild(new MenuItem({
        label: "Paste",
        iconClass: "dijitEditorIcon dijitEditorIconPaste"
    }));
    menu.startup();  
    
});