Раскрывающееся меню с HTML и CSS, хотите, чтобы оно оставалось видимым, пока не нажмете в другом месте

Question

Я пытаюсь создать выпадающие меню, которые выглядят примерно как меню строки меню MacOS (см. Фрагмент кода здесь).Пока они выглядят и работают нормально, но меню действительно должно оставаться видимым, пока пользователь не щелкнет (или коснется) где-нибудь на экране.Как и сейчас, они снова становятся «скрытыми», как только вы выходите из меню.

До сих пор это делалось с использованием чистого HTML и CSS, но моя интуиция подсказывает мне, что для достижения желаемого эффекта понадобится немного JavaScript, но моего JavaScript все еще немного не хватает.

Я думаю, что каждый элемент ul нуждается в событии onhover, которое устанавливает его видимость на "visible", тогда корневое окно или документ нуждается в событии onclick, чтобы установить все значения ниже первого уровня элементов #menu для"hidden".Кто-нибудь хочет попробовать это?

#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

Вы можете сделать это, используя javascript (в этом примере, используя jQuery):

1. Замените ваш CSS #menu li:hover>ul

Создав класс с именем "visible":

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

Используйте JQuery

Добавьте .hover(), чтобы обнаружить мышь над вашим меню и addClass() "видим" для текущего выпадающего меню (ul)

Добавьте .click(), который удалит класс «видимый» из любого выпадающего меню

Полный рабочий код по адресу: https://jsfiddle.net/ha1omd2w/

Answer 2

Спасибо за ваши отзывы.Я включил некоторые из них в версию ниже, которая, по моему мнению, начинает выглядеть разумно.Любой, кто заинтересован, прошу возиться с ним и посмотреть, где его все еще не хватает.Я знаю, что это сломается в старых браузерах [1], и я знаю, что я должен назначать события с помощью JavaScript, а не смешивать их в HTML с различными атрибутами тега on ... (это будет исправлено позже).Но всем, кто заинтересован, пожалуйста, не стесняйтесь сказать мне, где логика или стиль рушатся или где он работает тяжелее, чем нужно ...

[1] Хотя я планирую заняться любой реальной работой, чтобыподдержите старые браузеры с этим, возможно, я мог бы использовать один из этих «полифилов», о которых я слышал, как люди ... или, по крайней мере, отобразить сообщение «Не поддерживается» для не современных браузеров ...

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 3

Вероятно, вам придется немного изменить свою разметку, но использование псевдокласса :focus, вероятно, сделает то, что вы хотите.Если вы расширите все свои стили :hover с помощью :focus, вы увидите, что при нажатии на пункт меню он останется выбранным.Однако проблема заключается в том, что вы щелкаете и выделяете фокус тега <a>, который находится внутри тега <li>.Это означает, что вы не сможете использовать дочерние селекторы таким же образом.

Вы можете сделать одну из двух вещей, чтобы решить эту проблему: 1) Удалите упаковочный тег <li> и обновите ваши стили соответственно.2) Добавьте pointer-events: none к тегу <a>, который будет эффективно передавать событие click в <li>, и поместите в него фокус, на который затем можно будет ориентироваться с помощью стилей.Это также означает, что если у вас есть href на теге <a>, вы технически не сможете нажать, чтобы перейти к нему.