title: Dropdown menu with html and css, want it to stay visible until clicking elsewhere
body: <p>I'm trying to make dropdown menus which look something like MacOS menu bar menus (see the code snippet here). They're looking and working ok so far, but the menus really should stay visible until the user clicks (or taps) somewhere on the screen. As it is currently, they become "hidden" again as soon as you move out of the menu. </p>
  
  <p>So far it's being done with pure HTML and CSS, but my intuition tells me this will need a sprinkling of JavaScript to achieve the effect I'm after -- but my JavaScript is still a bit lacking.  </p>
  
  <p>I think each <code>ul</code> element needs an <code>onhover</code> event which sets its visibility to <code>"visible"</code>, then the root window or document needs an onclick event to set everything below the first level of #menu items to <code>"hidden"</code>. Does anyone care to have a go at this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {z-index: 9;
         font-family: "Lucida Grande", Helvetica, Arial, sans-serif;}
  
  
  #menu &gt;  ul{
      
      padding: 0px 10px;
      margin: 0;
  }
  
  
  #menu ul {
  
      list-style: none;    
  }
  
  #menu li {
      float: left;
      position: relative;
      padding-left: 3px; 
      padding-right: 3px;
      width: auto;
      color: rgb(68, 68, 68);
      margin-left: 0px; 
  }
  
  #menu ul ul li {
      width: 150px;
      padding-left: 15px;
  }
  
  
  
  #menu a {
      display: block;
      text-decoration: none;
      padding: 5px 5px;
      color: rgb(68, 68, 68);
  }
  
  
  #menu &gt;  ul ul {
      position: absolute;
      background: rgb(240, 240, 240);
      left: 0;
      top: 100%;
      visibility: hidden;
      opacity: 0.95;
      font-size: 15px;
      box-shadow: 0 3px 5px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24); 
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      margin-left: 0px;
  }
  
  #menu &gt; ul ul ul {
      left: 100%;
      top: -3px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
  
  }
  
  #menu &gt; ul  ul &gt; li:last-child {
      margin-bottom: 3px;
  }
  
  #menu &gt; ul  ul &gt; li:first-child {
      margin-top: 3px;
  }
  
  
  #menu ul ul hr
  {
      border: 1px solid rgb(201, 201, 201); 
      margin: 0px -15px;
      width: 165px;
  }
  
  
  #menu .li-selected
  {
      color: #407af2;
  }
  
  
  
  #menu li &gt; ul {
      margin-left: 0px;
      padding-left: 0px;
  }
  
  
  #menu &gt; ul ul ul li, ul ul  ul li a {
      background: rgb(240, 240, 240) !important;
  }
  
  
  #menu.hoverable li:hover
  {
      background: rgb(0, 144, 248);
  }
  
  
  #menu.hoverable ul li:hover &gt; a
  {
      color: rgb(240, 240, 240);
  }
  
  
  /* 
  #menu.hoverable ul li:hover &gt; ul, #menu.hoverable ul li &gt; ul.visible,
  #menu.hoverable ul li &gt; ul &gt; li &gt; ul.visible
  {
      visibility: visible;
  }
  */ 
  
  
  #menu.hoverable ul li &gt; ul.visible,
  #menu.hoverable ul li:hover &gt; ul,
  ul.visible
  {
      visibility: visible;
  }
  
  
  
  #menu.hoverable ul ul  ul li:hover, #menu.hoverable ul ul ul li:hover a {
      background: rgb(0, 144, 248) !important;
  }
  
  .li-heading, #menu.hoverable .li-heading:hover {
      background: rgb(240, 240, 240);
      color: rgb(68, 68, 68);
      padding: 5px 5px;
      padding-right: 10px;
      font-weight: bohttp://localhost:9000/sessions/102df527a94/index.html#ld;
  }
  
  
  .menu-right-icon
  {
      position: absolute;
      right: 10px;
      transform: scale(1.8,1.0);
  }
  
  
  .nav-caret
  {
      transform: scaleX(1.8);
  }
  
  
  html {
      height: 100%;
  }
  
  body {
      height: 100%;
      margin: 0;
  }
  
  .grid {
      display: grid;
      grid-gap: 1px;
      height: 100%;
      background-color: #aaa;
      font-family: "helvetica Neue", Helvetica, Arial, sans-serif;
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(15px, auto) 1fr 1fr;
      grid-template-areas: "menu" "tree" "inspector" "viewport";
  }
  
  @media (min-width: 700px) {
      .grid {
          /* grid-template-columns: minmax(auto, min-content)  minmax(auto, min-content)  minmax(auto, 100%); */
          /* grid-template-columns: minmax(auto, min-content) minmax(10px, 20px) minmax(auto, 100%); */
   /* grid-template-columns: minmax(auto, min-content) minmax(auto, 100%);  */
   grid-template-columns: minmax(auto, 20%)  minmax(auto, 100%);  
          grid-template-rows: auto minmax(auto, min-content) minmax(auto, 100%);
          grid-template-areas:     "menu menu "
           "tree viewport"
                                "inspector viewport";
      }
  }
  
  .menu {
      grid-area: menu;
      background: rgb(219, 230, 250);
      z-index: 9;
      font-size: 15px;
  }
  
  .menu-image {
      width: 16px;
      height: 15px;
  }
  
  .tree {
      grid-area: tree;
      background: rgb(209, 209, 209);
      resize: both;
      overflow: auto;
  }
  
  #tree-root {
      padding: 0 15px
  }
  
  .inspector {
      grid-area: inspector;
      font-size: 11px;
      background: #f8f8f8;
  /*    resize: horizontal; */
      overflow: auto;
      z-index: 5;
  }
  
  .viewport {
      grid-area: viewport;
      background: #e8e8e8;
      /* resize: both; */ 
      overflow: auto;
      z-index: 1;
  }
  
  .viewport div:first-child {
      text-align: center;
  }
  
  .growlr-tree ul {
      list-style: none;
      margin-left: 1em;
      padding-left: 0px;
  }
  
  .growlr-tree li {
      white-space: nowrap;
      list-style: none;
      margin-left: 0px;
      padding-left: 0px;
  }
  
  
  
  
  .expanded,
  .directory,
  .leaf {
      margin-bottom: 5px;
      margin-right: 5px;
  }
  
  .expanded {
      color: rgb(119, 119, 119);
  }
  
  .directory {
      color: rgb(212, 113, 113);
  }
  
  .leaf {
      color: rgb(100, 190, 104);
  }
  
  .inspector .heading {
      font-size: 15px;
      font-weight: bold;
      color: rgb(82, 82, 82);
  }
  
  
  .inspector-table, .inspector-table tr, .inspector-table tr td
  { 
      overflow: auto;
      cellpadding: 0;
      cellspacing: 0;
      border-collapse: collapse;
      text-align: left;
  }
  
  .inspector-table td
  {
      border: 1px solid rgb(168, 168, 168);
      padding: 3px 2px;
      text-align: left;
  }
  
  
  .inspector-table td:first-child
  {
     color: rgb(78, 78, 78);
     text-align: center;
  }
  
  .inspector-table tr:nth-child(odd)
  {
      background-color: rgb(233, 242, 255);
  }
  
  
  
  .i-t-m
  {
      padding: 0px;
      text-align: left;
  }
  
  .i-t-v
  {
      padding: 0px;
      text-align: left;
  
  }
  
  .i-t-v-click
  {
      color: blue;
      font-style: italic;
      font-family: monospace;
      cursor: pointer;
      white-space: pre;
  }
  
  .i-t-v-unclick
  {
      color: black;
      font-family: monospace;
      width: 10px;
      white-space: pre;
  }
  
  
  
  #svg-1 path {vector-effect: non-scaling-stroke};
  
  
  #x3dom-1 {background: #d3d3d3;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;title&gt;Genworks GDL - assembly&lt;/title&gt;&lt;meta charset="UTF-8" /&gt;&lt;link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /&gt;&lt;div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p"&gt;
  &lt;link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /&gt;&lt;/div&gt;&lt;/head&gt;&lt;body&gt;
  &lt;div class="grid"&gt;
    &lt;div id="menu-cell" class="cell menu"&gt;&lt;div id="KDptZW51KQ"&gt;&lt;script&gt;
  
   function hideMenus(event)
  {
    var related = event.relatedTarget;
    var  isInMenu = ((related) &amp;&amp; (document.querySelector('#menu').contains(related)));
    if (!(isInMenu))
    {
    setTimeout(removeMenuHoverable, 50);
    setTimeout(removeMenuVisible, 50);
    }
  }
  
   function hideTopMenus (event)
  {
    var obj = event.target;
    var uls = document.querySelectorAll('#menu &gt; ul &gt; li &gt; ul');
    for (var i = 0; i &lt; uls.length; i++)
        uls[i].classList.remove('visible');
  }
  
   function removeMenuHoverable()
    {
      document.querySelector('#menu').classList.remove('hoverable');
     }
  
   function removeMenuVisible ()
   {
     var uls = document.querySelectorAll('#menu ul ul');
     for (var i=0; i&lt; uls.length; i++) 
       uls[i].classList.remove('visible');
   }
  
   function addVisible(event, level)
   {
     var obj = event.target;
  
     if (obj.tagName == 'A')
      obj = obj.parentNode.parentNode;
   
  
     if (obj.tagName == 'UL')
     {
        obj.classList.add('visible');
        var par = obj.parentNode.parentNode;
        if (par.tagName == 'UL')
        { par.classList.add('visible');
        }
        event.stopPropagation();
  
     }
  }
  
  
  &lt;/script&gt;
  &lt;nav id="menu"&gt;
  &lt;ul onmouseover="
    hideTopMenus(event);
  
  "&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;&lt;img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" /&gt;
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;&lt;li&gt;&lt;a href="#" class="li-selected"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt; Development&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;File
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;New
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;Open
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;Save
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;Edit
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;Color
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;Line Thickness
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;Tree
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;&lt;li&gt;&lt;a href="#"&gt; Add Node...&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Draw Node...&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Add Leaves...&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Draw Leaves...&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;View
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0"&gt;Camera Point
  &lt;span class="menu-right-icon"&gt;
    &lt;i class="fas fa-caret-right"&gt;&lt;/i&gt;
  &lt;/span&gt;
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 2);
  
  "&gt;&lt;li&gt;&lt;a href="#" class="li-selected"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt; Trimetric&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Top&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Front&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Left&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Bottom&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Rear&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Right&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Fit to View&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Clear!&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0"&gt;Graphics Format
  &lt;span class="menu-right-icon"&gt;
    &lt;i class="fas fa-caret-right"&gt;&lt;/i&gt;
  &lt;/span&gt;
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 2);
  
  "&gt;&lt;li&gt;&lt;a href="#"&gt; SVG&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" class="li-selected"&gt;&lt;i class="fas fa-check"&gt;&lt;/i&gt; Raphael&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; x3dom&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; png&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; jpeg&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" tabindex="0" onfocus="
  
  document.querySelector('#menu').classList.add('hoverable');
  
  " onblur="hideMenus(event);"&gt;Develop
    &lt;/a&gt;
  &lt;ul onmouseover="
   addVisible(event, 1);
  
  "&gt;&lt;li&gt;&lt;a href="#"&gt; Update!&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt; Set Self!&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>