keep parent item active when hovering on sub item - html

Question

I have this css code:
.nav li li a { /* sub menu list */
display: block;
background: #F36F25;
position: relative;
z-index:100;
border-top: 1px solid #ffffff;
}
.nav > li > ul > li.hover > a { /* sub menu list hover */
background:#FFFFFF;
}
.nav > li > ul > li.hover > ul > li { /* sub sub menu list hover */
background:#F36F25;
}
how can i ensure that the parent item stays active when hovering over a child item?
Also, how can i get an active class working for parent items and also if a child item has the active class i want the parent and child item to have the class assigned

Answer 1

We have this html :
<div id="nav">
<ul>
<li>Home</li>
<li>Menu 1
<ul>
<li>Sub menu</li>
<li>Sub menu</li>
<li>Sub menu</li>
<li>**Sub menu
<ul>
<li>Sub menu</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And this CSS:
* {margin: 0 auto; padding: 0;}
a{text-decoration: none;}
#nav ul {
list-style-type: none;
height: 32px;
background:#333;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
padding: 0 7px;
}
#nav ul li:hover {background:#ff6600;}
#nav ul li:hover > ul {display: block;}
#nav ul li ul {
display: none;
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: auto;
}
#nav ul li ul li, #nav ul li ul li a {
float: none;
display: block;
}
#nav ul li ul li ul {
top: 0;
left: 100px;
}
this is Demo link :
http://jsfiddle.net/ebadgh/c4x7gwvw/