Child Hover Active Parent

by Faisal Khan Janjua

HTML

<div id="mylist">
  <ul>
    <li><a>Foods</a>
      <ul>
        <li><a>Foods</a></li>
        <li><a>Clothes</a></li>
        <li><a>Lifestyles</a>
          <ul>
            <li><a>Foods</a></li>
            <li><a>Clothes</a></li>
            <li><a>Lifestyles</a></li>
            <li><a>Misc</a></li>
          </ul>
        </li>
        <li><a>Misc</a></li>
      </ul>
    </li>
    <li><a>Clothes</a>
      <ul>
        <li><a>Foods</a></li>
        <li><a>Clothes</a>
          <ul>
            <li><a>Foods</a></li>
            <li><a>Clothes</a></li>
            <li><a>Lifestyles</a></li>
            <li><a>Misc</a></li>
          </ul>
        </li>
        <li><a>Lifestyles</a></li>
        <li><a>Misc</a></li>
      </ul>
    </li>
    <li><a>Lifestyles</a>
      <ul>
        <li><a>Foods</a></li>
        <li><a>Clothes</a></li>
        <li><a>Lifestyles</a></li>
        <li><a>Misc</a></li>
      </ul>
    </li>
    <li><a>Misc</a>
      <ul>
        <li><a>Foods</a></li>
        <li><a>Clothes</a>
          <ul>
            <li><a>Foods</a></li>
            <li><a>Clothes</a></li>
            <li><a>Lifestyles</a></li>
            <li><a>Misc</a></li>
          </ul>
        </li>
        <li><a>Lifestyles</a></li>
        <li><a>Misc</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

#mylist ul{
  width:200px;
  float:left;
  display:block;
  list-style:none;
  padding:0;
}
#mylist > ul{
  background: #9F9;
  padding:10px 0 10px 10px;
}
#mylist > ul > li{
  width:100%;
  float:left;
  position:relative;
}
#mylist > ul > li a{
  padding:8px 10px;
  display:block;
}
#mylist > ul > li ul{
  display:none;
  background:#99F;
  position:absolute;
  left:100%;
  top:0;
}
#mylist > ul li:hover > ul{
  display:block;
}
#mylist > ul li li,
#mylist > ul li a {
  border-radius: 0 !important;
}
#mylist > ul > li > a:hover,
#mylist > ul > li.ahover > a{
  background:#99f;
  border-radius:5px 0 0 5px;
} 
#mylist > ul > li li a:hover,
#mylist > ul > li li.ahover a,
#mylist > ul > li li li a,
#mylist > ul > li ul li ul {
  background:#F99;
}
#mylist > ul > li li li a:hover{
  background:#FF9;
}
/* #mylist > ul > li ul > li ul li a{
  background:#F99;
  border-radius:0;
} */

JavaScript

jQuery(document).ready(function(){
  jQuery('#mylist ul li ul').hover(function(){
    jQuery(this).closest('li').addClass('ahover');
  },function(){
    jQuery(this).closest('li').removeClass('ahover');
  });

/*   jQuery('#navbar .header_bottom ul.menu li ul').hover(function(){
    jQuery(this).closest('li').addClass('ahover');
  },function(){
    jQuery(this).closest('li').removeClass('ahover');
  }); */

});