Show a custom context menu at clicked position

<div id="element">Right-click me</div>

<ul id="menu">...</menu>

const ele = document.getElementById('element');
ele.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

<div class="relative">
    <div id="element">Right-click me</div>

    <ul id="menu" class="absolute hidden">...</menu>
</div>

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.hidden {
    /* The menu is hidden at first */
    display: none;
}

ele.addEventListener('contextmenu', function (e) {
    const rect = ele.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Set the position for menu
    menu.style.top = `${y}px`;
    menu.style.left = `${x}px`;

    // Show the menu
    menu.classList.remove('hidden');
});

ele.addEventListener('contextmenu', function(e) {
    ...
    document.addEventListener('click', documentClickHandler);
});

// Hide the menu when clicking outside of it
const documentClickHandler = function(e) {
    const isClickedOutside = !menu.contains(e.target);
    if (isClickedOutside) {
        // Hide the menu
        menu.classList.add('hidden');

        // Remove the event handler
        document.removeEventListener('click', documentClickHandler);
    }
};