javascript - 如何在悬停时保持CSS样式

Question

我有一个菜单，我在此处添加了它的最小化代码。我希望在用户将鼠标悬停在 <a> 上时显示子菜单。与之关联的标签。这里的问题是 => 当我将鼠标悬停在 <a> 上时标记它显示子菜单但是当我尝试选择子菜单项时它消失了。我该如何解决这个问题？

.nav-sec-level{
  opacity:0;
  border:1px solid #000;
  }

a:hover + ul.nav-sec-level{
  opacity:1;
  }

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>

注意:我只能为 <a> 应用悬停属性标签。

Answer 1

.nav-sec-level{
  background: red;
  border:1px solid #000;
  display: none;
 }

.side-bar:hover .nav-sec-level{
   display: block;
}

<ul>
  <li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>

<li class="side-bar">
  <a>gh kl</a>
  <ul class="nav-sec-level">some menu
    <li>jdfs</li>
    <li>jdfs</li>
    <li>jdfs</li>
  </ul>
</li>
</ul>