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

通过使用 jQuery，这是您当前代码的一个选项（fiddle 此处：https://jsfiddle.net/j0wLj6z9/）

<script type="text/javascript">
  $(document).ready(function(){
  $('.dropdown').hover(function(){
     $(this).toggleClass('highlighted');
  });
  });
</script>

你的 css 是你想要的任何东西：

.highlighted
{ 
   background: yellow;
}

同时在您的项目中包含 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 2

如我的评论所述 - .dropdown 在 :hover 上仍应为 "highlighted"，因为 .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

CSS 当鼠标悬停在子菜单上时，父菜单保持高亮

CSS Parent menu stay on highlighted when mouse hover to sub menu

html

css

drop-down-menu