Edit in JSFiddle

$(document).ready(function () {
    $(".parent").jQContextMenu({
        selector: ".showMenu",
        target: "#menu",
        itemClick: function (event, ui) {
            var text = $(ui.items[0]).text();
            alert("You clicked on " + text);
        }
    });
           
    $("#showBtn").click(function () {
        $(".showMenu").jQContextMenu({ x: 150, y: 100 });
    });
});

<div class="parent" style="z-index:20; color:white;  margin-left:20%; margin-right:20% ">
        <span  style="color:#4E4D4D; font-size:24px; font-family:Segoe UI;">Manually showing Context Menu</span>
        <div class="showMenu" style="margin-top:30px; padding: 60px 60px 60px 120px; background-color:rgb(163, 163, 163); font-size:25px;">Right Click here to Show Context Menu</div>
        <button id="showBtn" style="margin-top:5px;">Show Context Menu</button>
        <div style="color:#4E4D4D; margin-top:50px; font-size:18px; font-family:Segoe UI;">This sample illustrates how to manually show Context Menu and how to show custom image in menu item.</div>
    </div>

    <ul id="menu">
        <!--Adding custom imange to menu item-->
        <li><span class="custom-icon"><img src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/cut.png" /></span>Cut</li>
        <li><span class="ui-icon ui-icon-copy"></span>Copy</li>
        <li><span class="ui-icon ui-icon-copy"></span>Paste</li>
        <li>-----</li>
        <li>Edit</li>
        <li>Other Options<ul><li>Option1</li><li>Option2</li></ul></li>
    </ul>
<br/>
<p><font size="3"><b>Source for this<a  target="_blank"href="http://jqfaq.com/jquery-ui-context-menu-plugin/"</a> JQFaq Question</b></font></p>
    <iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%;border:none;" />

       .custom-icon {
        position: absolute;
        top: 3px;
        bottom: 0;
        left: .2em;
        margin: auto 0;
        }
        .custom-icon >img{
        width:15px;
        }