html - 当鼠标悬停到子菜单时，CSS 父菜单保持突出显示

Question

我想让我的“Kuantan”菜单在我悬停到他们的子菜单“kiosk no.35”后保持突出显示。但是我尝试改变一些方式让它保持活跃但我没有这样做。我错过了我的代码吗？请指出我的错误。谢谢

这是html代码:

<ul class="treeview-menu">
    <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#sub1"><i class="fa fa-angle-double-right"></i> Kuantan</a>
        <ul class="nav dropdown-menu" style="width:100px;height:30px">
            <li><a href="chooseOption.php?kiosk=35" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.35</a></li>
        </ul>
    </li>
    <li class="dropdown"><a href="#"><i class="fa fa-angle-double-right"></i> UTC Kuantan</a>
      <ul class="nav dropdown-menu" style="width:100px;height:30px">
        <li><a href="chooseOption.php?kiosk=36" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.36</a></li>
     </ul>
    </li>
    <li class="dropdown"><a href="#"><i class="fa fa-angle-double-right"></i> Temerloh</a>
      <ul class="nav dropdown-menu" style="width:100px;height:30px">
         <li><a href="chooseOption.php?kiosk=37" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.37</a></li>
     </ul>
    </li>
    <li class="dropdown"><a href="#"><i class="fa fa-angle-double-right"></i> Bentong</a>
    <ul class="nav dropdown-menu" style="width:100px;height:30px">
       <li><a href="chooseOption.php?kiosk=6" style="margin-left:-20px;margin-top:-13px;" >Kiosk No.6</a></li>
  </ul>
</li>
<hr/>
</ul>

这是我将鼠标悬停在下拉菜单上然后会出现下拉菜单的 css:

/*3rd level sidebar menu */

.dropdown:hover .dropdown-menu {
    display: block;
    left:220px;
    top:0;
}

我想要的是，在我悬停下拉菜单并转到下拉菜单后，下拉菜单将保持突出显示。有可能吗？抱歉，我对这种 CSS 技能还是陌生的。

Answer 1

如我的评论所述 - .dropdown 仍应在 :hover 上“突出显示”，因为 .dropdown-menu 嵌套在里面它，因此您仍然悬停在 .dropdown 上。

/* Assuming you are making nested lists display:none */
ul{
    list-style: none;
}
.dropdown-menu{
    display: none;
}
.dropdown:hover{
    background: yellow;
}
.dropdown:hover .dropdown-menu {
    display: block;
    left:220px;
    top:0;
}

DEMO HERE