jQuery context menu right click event with toggle function

In the following web there is a div and a menu at the bottom.
When loading the document, using jQuery we hide the bottom menu with the hide() function.
We select the existing div with id "c_menu" and execute the event "contextmenu", that is to say, when we click with the right mouse button on the div, we create a function that executes the following:

Select the menu and apply css styles to it. With event.pageX and event.pageY sets the position of the selected element in relation to the left and top borders of the document.
It selects the menu and with toggle() it applies the state of showing or hiding the menu depending on whether it is visible at that moment.

<style>
  #contextMenu {
    background-color: pink;
    border: 1px solid black;
    border-radius: 2px;
    padding: 5px;
    position: fixed;
    list-style-type: none;
  }
</style>
<div id="c_menu" style="padding:5px;border:2px solid red;border-radius:5px;">
  Right Button here to show content menu
</div>
<ul id="contextMenu">
  <li>Option menu 1</li>
  <li>Option menu 2</li>
  <li>Option menu 3</li>
</ul>
<!--Script jQuery-->
<script>
  $(function(){
    $("ul#contextMenu").hide();

    $("#c_menu").contextmenu(function (event) {
      event.preventDefault();
      $("ul#contextMenu").css({
        "left": event.pageX,
        "top": event.pageY
      });
      $("ul#contextMenu").toggle();
    });
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>