keep parent css when hovering over child item - css

Question

I am using this CSS code for a horizontal menu:
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li a:hover {
color:#000;
}
#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;
}
i am trying to get the parent link to stay with the same text color when hovering over a child item. How do i do this? I have also created a fiddle here:
http://jsfiddle.net/gfmxjtr5/1/

Answer 1

You could set to color of the links when the parent <li> is :hovered:
Updated Example
#nav ul li:hover > a {
color: #000;
}
* {
margin: 0 auto;
padding: 0;
}
a{
text-decoration: none;
}
#nav ul {
list-style-type: none;
height: 32px;
background:#F36F25;
width: auto;
}
#nav ul li {
float: left;
height: 32px;
position: relative;
}
#nav ul li a {
float:left;
line-height: 32px;
color:#fff;
width: 86px;
padding: 0 7px;
text-align: center;
}
#nav ul li:hover {
background:#FFFFFF;
}
#nav ul li:hover > a {
color:#000;
}
#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;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Account
<ul>
<li>Company Details</li>
<li>Contacts</li>
<li>My Price Tariffs</li>
</ul>
</li>
<li>Billing
<ul>
<li>Billing Info</li>
<li>Invoices</li>
</ul>
</li>
<li>Tickets
<ul>
<li>View Tickets</li>
<li>Open Ticket</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>