Dropdown menu with html and css, want it to stay visible until clicking elsewhere

Question

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.

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.

I think each ul element needs an onhover event which sets its visibility to "visible", then the root window or document needs an onclick event to set everything below the first level of #menu items to "hidden". Does anyone care to have a go at this?

#menu {z-index: 9;
       font-family: "Lucida Grande", Helvetica, Arial, sans-serif;}


#menu >  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 >  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 > ul ul ul {
    left: 100%;
    top: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

#menu > ul  ul > li:last-child {
    margin-bottom: 3px;
}

#menu > ul  ul > 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 > ul {
    margin-left: 0px;
    padding-left: 0px;
}


#menu > 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 > a
{
    color: rgb(240, 240, 240);
}


/* 
#menu.hoverable ul li:hover > ul, #menu.hoverable ul li > ul.visible,
#menu.hoverable ul li > ul > li > ul.visible
{
    visibility: visible;
}
*/ 


#menu.hoverable ul li > ul.visible,
#menu.hoverable ul li:hover > 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;}

<!DOCTYPE HTML><html lang="en"><head><title>Genworks GDL - assembly</title><meta charset="UTF-8" /><link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /><div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p">
<link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /></div></head><body>
<div class="grid">
  <div id="menu-cell" class="cell menu"><div id="KDptZW51KQ"><script>

 function hideMenus(event)
{
  var related = event.relatedTarget;
  var  isInMenu = ((related) && (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 > ul > li > ul');
  for (var i = 0; i < 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< 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();

   }
}


</script>
<nav id="menu">
<ul onmouseover="
  hideTopMenus(event);

">
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);"><img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" />
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Development</a></li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">File
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#">New
  </a>
</li>
<li>
  <a href="#">Open
  </a>
</li>
<li>
  <a href="#">Save
  </a>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Edit
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#">Color
  </a>
</li>
<li>
  <a href="#">Line Thickness
  </a>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Tree
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#"> Add Node...</a></li><li><a href="#"> Draw Node...</a></li><li><a href="#"> Add Leaves...</a></li><li><a href="#"> Draw Leaves...</a></li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">View
  </a>
<ul onmouseover="
 addVisible(event, 1);

">
<li>
  <a href="#" tabindex="0">Camera Point
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul onmouseover="
 addVisible(event, 2);

"><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Trimetric</a></li><li><a href="#"> Top</a></li><li><a href="#"> Front</a></li><li><a href="#"> Left</a></li><li><a href="#"> Bottom</a></li><li><a href="#"> Rear</a></li><li><a href="#"> Right</a></li>
</ul>
</li><li></li><li><a href="#"> Fit to View</a></li><li><a href="#"> Clear!</a></li><li></li>
<li>
  <a href="#" tabindex="0">Graphics Format
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul onmouseover="
 addVisible(event, 2);

"><li><a href="#"> SVG</a></li><li><a href="#" class="li-selected"><i class="fas fa-check"></i> Raphael</a></li><li><a href="#"> x3dom</a></li><li><a href="#"> png</a></li><li><a href="#"> jpeg</a></li>
</ul>
</li>
</ul>
</li>
<li>
  <a href="#" tabindex="0" onfocus="

document.querySelector('#menu').classList.add('hoverable');

" onblur="hideMenus(event);">Develop
  </a>
<ul onmouseover="
 addVisible(event, 1);

"><li><a href="#"> Update!</a></li><li><a href="#"> Set Self!</a></li>
</ul>
</li>
</ul>
</nav></div>
  </div>
</div></body></html>

Answer 1

Thanks for your feedbacks. I've incorporated some of them into the version below, which I feel is starting to look reasonable. Anyone who's interested, please poke around with it and see where it's still lacking. I know it will break on older browsers [1], and I know I should be assigning the events with JavaScript rather than mixing them in the HTML with various on... tag attributes (will fix later). But anyone who's interested please feel free to tell me where the logic or styling falls apart or where it's working harder than it needs to be...

[1] Although I plan to punt on doing any real work to support older browsers with this, maybe I could use one of these "polyfills" I hear people speaking of... or at least display a "Not Supported" message for non-modern browsers...

function makeMenuBarHoverable (event)
{
 document.querySelector('#menu').classList.add('hoverable');
}


function hideMenus(event)
{ 
  var lis;
  var obj = (event && event.target);
  var menu = document.querySelector('#menu');
  
  if (obj && menu.contains(obj))
  {
    while (obj && (!(obj.tagName == 'LI'))) obj = obj.parentNode;
    var ul = obj.parentNode;
    lis = ul.querySelectorAll('li');
  }
  else
  {
    lis = menu.querySelectorAll('ul li');   
    menu.classList.remove('hoverable');
  }

  for (var i=0;i<lis.length;i++)
   {
    var li = lis[i];
    if /* ((! (li == obj)) && (li.classList.contains('visible'))) */ 
       (! (li == obj))
       li.classList.remove('visible');
   }
}

setTimeout(hideMenus, 10);

document.addEventListener('click', hideMenus);

function addVisible(event, level)
{
  var obj = event.target;

  while (obj && (obj.tagName != 'UL')) obj = obj.parentNode;
  if (obj.tagName == 'UL') obj = obj.parentNode;
  if ((obj.tagName == 'LI') && (! (obj.classList.contains('visible'))))
    obj.classList.add('visible');
}

#menu, #menu ul, #menu li, #menu a
{
    z-index: 9;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}


#menu >  ul
{
    padding: 0px 10px;
    margin: 0;
}

#menu ul
{
    list-style: none;    
}

#menu > ul > li
{
    float: left;
    position: relative;
    padding-left: 3px; 
    padding-right: 3px;
    width: auto;
    margin-left: 0px; 
}

#menu ul ul li
{
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
}

#menu ul ul li a
{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#menu  ul li
{
    outline: none;
}

#menu a
{
    display: block;
    text-decoration: none;
    padding: 5px 5px;
    color: rgb(68, 68, 68);
}


#menu >  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 > ul ul ul
{
    left: 100%;
    top: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#menu > ul  ul > li:last-child
{
    margin-bottom: 3px;
}

#menu > ul  ul > li:first-child
{
    margin-top: 3px;
}


#menu ul ul hr
{
    border: 1px solid rgb(201, 201, 201); 
    margin: 0px -15px;
}

#menu li > ul
{
    margin-left: 0px;
    padding-left: 0px;
}

#menu > ul ul li
{
    position: relative;
}

#menu > ul > li, #menu > ul > li > a
{
    background:  rgb(219, 230, 250); !important;
}


#menu ul li ul li > a,
#menu ul li ul li
{
    background: rgb(240, 240, 240);
    color: rgb(68, 68, 68);
}

#menu  ul li.visible > a,
#menu  ul li.visible, 
#menu.hoverable  ul li:hover > a,
#menu.hoverable  ul li:hover
{
    color: rgb(240, 240, 240)  !important;
    background: rgb(0, 144, 248)  !important;
}

#menu ul li ul .li-selected
{
    color: #407af2;
}


#menu.hoverable ul li.visible > ul,
#menu.hoverable ul li:hover > ul
{
    visibility: visible;
}

.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: bold;
}

.fa-check
{
    padding-right: 5px;
}

.menu-right-icon
{
    margin-left: auto;
    padding-left: 12px;
    transform: scale(1.8,1.0);
}


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;
}

<!DOCTYPE HTML><html lang="en"><head><title>Genworks GDL - assembly</title><meta charset="UTF-8" /><link rel="icon" type="image/x-icon" href="/static/gwl/images/favicon.ico" /><div id="KDpzdGFuZGFyZC1qYXZhc2NyaXB0LXNlY3Rpb24p">
<link id="fontawesome-css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" /></div></head><body>
<div class="grid">
  <div id="menu-cell" class="cell menu"><div id="KDptZW51KQ">
<nav id="menu">
<ul id="menu">
<li id="(the :logo)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :logo)"><img class="menu-image" src="https://genworks.com/static/gwl/images/logo.png" alt="G" />
  </a>
<ul id="(the :logo)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"><a href="#" class="li-selected"><i class="fas fa-check"></i> Development</a></li>
</ul>
</li>
<li id="(the :file)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :file)">File
  </a>
<ul id="(the :file)" onmouseover="addVisible(event, 1);">
<li onmouseover="hideMenus(event);">
  <a href="#">New
  </a>
</li>
<li onmouseover="hideMenus(event);">
  <a href="#">Open
  </a>
</li>
<li onmouseover="hideMenus(event);">
  <a href="#">Save
  </a>
</li>
</ul>
</li>
<li id="(the :edit)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :edit)">Edit
  </a>
<ul id="(the :edit)" onmouseover="addVisible(event, 1);">
<li onmouseover="hideMenus(event);">
  <a href="#">Color
  </a>
</li>
<li onmouseover="hideMenus(event);">
  <a href="#">Line Thickness
  </a>
</li>
</ul>
</li>
<li id="(the :tree)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :tree)">Tree
  </a>
<ul id="(the :tree)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"><a href="#"> Add Node...</a></li><li onmouseover="hideMenus(event);"><a href="#" class="li-selected"><i class="fas fa-check"></i> Draw Node...</a></li><li onmouseover="hideMenus(event);"><a href="#"> Add Leaves...</a></li><li onmouseover="hideMenus(event);"><a href="#"> Draw Leaves...</a></li>
</ul>
</li>
<li id="(the :view)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :view)">View
  </a>
<ul id="(the :view)" onmouseover="addVisible(event, 1);">
<li id="(the :view :camera-point-menu)" tabindex="0" onmouseover="hideMenus(event);">
  <a href="#" id="a (the :view :camera-point-menu)">Camera Point to view from this direction
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul id="(the :view :camera-point-menu)" onmouseover="addVisible(event, 2);"><li onmouseover="hideMenus(event);"><a href="#" class="li-selected"><i class="fas fa-check"></i> Trimetric</a></li><li onmouseover="hideMenus(event);"><a href="#"> Top</a></li><li onmouseover="hideMenus(event);"><a href="#"> Front</a></li><li onmouseover="hideMenus(event);"><a href="#"> Left</a></li><li onmouseover="hideMenus(event);"><a href="#"> Bottom</a></li><li onmouseover="hideMenus(event);"><a href="#"> Rear</a></li><li onmouseover="hideMenus(event);"><a href="#"> Right</a></li>
</ul>
</li><li onmouseover="hideMenus(event);"><hr /></li><li onmouseover="hideMenus(event);"><a href="#"> Fit to View</a></li><li onmouseover="hideMenus(event);"><a href="#"> Clear!</a></li><li onmouseover="hideMenus(event);"><hr /></li>
<li id="(the :view :graphics-format-menu)" tabindex="0" onmouseover="hideMenus(event);">
  <a href="#" id="a (the :view :graphics-format-menu)">Graphics Format 
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul id="(the :view :graphics-format-menu)" onmouseover="addVisible(event, 2);"><li onmouseover="hideMenus(event);"><a href="#" class="li-selected"><i class="fas fa-check"></i> SVG</a></li><li onmouseover="hideMenus(event);"><a href="#"> x3dom</a></li><li onmouseover="hideMenus(event);"><a href="#"> png</a></li>
<li id="(the :view :graphics-format-menu :tree-menu)" tabindex="0" onmouseover="hideMenus(event);">
  <a href="#" id="a (the :view :graphics-format-menu :tree-menu)">Tree
<span class="menu-right-icon">
  <i class="fas fa-caret-right"></i>
</span>
  </a>
<ul id="(the :view :graphics-format-menu :tree-menu)" onmouseover="addVisible(event, 3);"><li onmouseover="hideMenus(event);"><a href="#"> Add Node...</a></li><li onmouseover="hideMenus(event);"><a href="#" class="li-selected"><i class="fas fa-check"></i> Draw Node...</a></li><li onmouseover="hideMenus(event);"><a href="#"> Add Leaves...</a></li><li onmouseover="hideMenus(event);"><a href="#"> Draw Leaves...</a></li>
</ul>
</li><li onmouseover="hideMenus(event);"><a href="#"> jpeg</a></li>
</ul>
</li>
</ul>
</li>
<li id="(the :develop)" tabindex="0" onmouseover="hideMenus(event);" onclick="makeMenuBarHoverable(event);">
  <a href="#" id="a (the :develop)">Develop
  </a>
<ul id="(the :develop)" onmouseover="addVisible(event, 1);"><li onmouseover="hideMenus(event);"><a href="#"> Update!</a></li><li onmouseover="hideMenus(event);"><a href="#"> Set Self!</a></li>
</ul>
</li>
</ul>
</nav></div>
  </div>  
  </div>
</div></body></html>

Answer 2

You can do this using javascript (in this example using jQuery):

1. Replace your css #menu li:hover>ul

By creating a class named "visible":

#menu li>ul.visible {
  visibility: visible;
  opacity: 0.95;
  margin-left: 0px;
  padding-left: 0px;
}

2. Use JQuery

3. Add .hover() to detect mouse over your menu and addClass() "visible" to the current dropdown menu (ul)

4. Add .click() which will remove class "visible" from any dropdown menu

Full working code at: https://jsfiddle.net/ha1omd2w/

Answer 3

You will likely have to change your markup slightly, but using the :focus pseudo class will probably do what you want. If you extend all of your :hover styles with :focus you will see that when you click a menu item it will stay selected. The issue though is you are clicking and giving the <a> tag focus that is inside of the <li> tag. That means you won't be able to use child selectors the same way.

You could do one of two things to solve this: 1) Remove the wrapping <li> tag and update your styles accordingly. 2) Add pointer-events: none to the <a> tag which would effectively pass the click event to the <li> and put focus there which you could then target with styles. This also means though that if you have a href on the <a> tag you will technically not be able to click to navigate to it.