A demo of creating context menu

jQuery, CSS and HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/contextMenu/contextMenu.min.css">
    <style type="text/css">
        html,body,ul,li{
            margin:1px;
            padding: 1px;
        }
        body{
            font:13px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
        }
        .box{
            width: 225px;
            height:190px;
            margin:50px auto;
            text-align: center;
            line-height: 150px;
        }
        #box1{
            background-color: #B3D9D9;
        }
        #box2{
            background-color: #2E5C5C;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box" id="box1">Right click to open the menu</div>
    <div class="box" id="box2">Right click to open the menu</div>
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/contextMenu/contextMenu.min.js"></script>
    <script type="text/javascript">
        var data = [
            [
                {
                    text: "<i class='fa fa-cut site-cm-icon'></i>Cut (ctrl+x)",
                    action: function () {
                        console.log("??");
                    }
                },
                {
                    text: "<i class='fa fa-copy site-cm-icon'></i>Copy (ctrl+c)"
                },
                {
                    text: "<i class='fa fa-paste site-cm-icon'></i>Paste (ctrl+v)",
                    action: function () {
                        console.log("??");
                    }
                }
            ],
            [
                {
                    text: "<i class='fa fa-bold site-cm-icon'></i>Bold (ctrl+b)"
                },
                {
                    text: "<i class='fa fa-italic site-cm-icon'></i>Italic (ctrl+i)"
                },
                {
                    text: "<i class='fa fa-underline site-cm-icon'></i>Underline (ctrl+u)"
                }],
            [
                {
                    text: "<i class='fa fa-font site-cm-icon'></i>Font"
                }],
            [
                {
                    text: "<i class='fa fa-subscript site-cm-icon'></i>Subscript (ctrl+=)"
                },
                {
                    text: "<i class='fa fa-superscript site-cm-icon'></i>Superscript(ctrl+shift++)"
                }
            ]
        ];

        var data2 = [
            [
                {
                    text: "<i class='fa fa-cut site-cm-icon'></i>Cut (ctrl+x)"
                },
                {
                    text: "<i class='fa fa-copy site-cm-icon'></i>Copy (ctrl+c)"
                },
                {
                    text: "<i class='fa fa-paste site-cm-icon'></i>Paste (ctrl+v)"
                }
            ]
        ];

        $("#box1").contextMenu(data);
        $("#box2").contextMenu(data2, {
            name: "box2"
        });
    </script>
</body>    
</html>
Right click to open the menu