document on click on a open menu and if click outside remove class of menuif click was not cloeset

to the menu, remove the class. Here is an example of how you can achieve this using JavaScript:

HTML:

<button id="open-menu">Open Menu</button>
<div id="menu" class="menu">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

CSS:

.menu {
  display: none;
}

.menu.open {
  display: block;
}

JavaScript:

document.addEventListener("click", function(event) {
  var menu = document.getElementById("menu");
  var openMenuBtn = document.getElementById("open-menu");

  if (event.target === openMenuBtn) {
    menu.classList.toggle("open");
  } else if (!menu.contains(event.target)) {
    menu.classList.remove("open");
  }
});

In this example, when the "Open Menu" button is clicked, it toggles the "open" class on the menu element, which will display or hide the menu based on the CSS styles. If a click event occurs outside the menu (i.e., not within any element inside the menu), the "open" class is removed from the menu element, hiding the menu