Question

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

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

我想要的是，在我将鼠标悬停在下拉菜单中并进入下拉菜单后，dropdwn将保持突出显示。有可能吗？对不起，我对这个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

Answer 2

通过使用jQuery，这是您当前代码的一个选项（在此处小提琴：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>

当鼠标悬停在子菜单上时，CSS父菜单会保持突出显示

2 个答案: