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

Question

I wanted to let my "Kuantan" menu to stay highlighted after i hover to their child menu which is "kiosk no.35". But i try to change few way to let it stay active but i had failed to do so. Anything i miss out on my code? Please point my wrong. Thanks

Here is the html code:

<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>

Here is the css where i hover the dropdown then the dropdown-menu will came out:

/*3rd level sidebar menu */

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

What i want is that after i hover the dropdown and went to dropdown-menu, the dropdwn will stay highlighted. Is there possible? Sorry i'm still new to this css skill.

Answer 1

As explained in my comment - .dropdown should still be "highlighted" on :hover , because .dropdown-menu is nested inside it and therefore you are still hovering over .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

By using jQuery this is one option with your current code (fiddle here: https://jsfiddle.net/j0wLj6z9/ )

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

and your css is whatever you'd like:

.highlighted
{ 
   background: yellow;
}

Also include jQuery in your project:

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