Trying to create CSS nav and having issue with sub elements

[miad22]

I am trying to create a left hand nav and have it close to where I need it except for one problem.Take a look at the example in this Fiddle.When the mouse hovers over the "link" items, the cell changes color. But when it hovers over the secondary items, the outer parent li also changes color. I realize this is because the outer li also has a class of "link", but if I take that class off, then the background isn't correct.Basically, I want the sub elements to stretch border to border in the overall container. Maybe a ul list is not an appropriate control for what I am trying to achieve?Appreciate any help.HTML\[code\]<div class="nav"> <ul> <li class="link active">Home</li> <li class="link">Profile</li> <li class="navhead">Messages</li> <li class="link"> <ul> <li class="link">Open</li> <li class="link">Closed Closed Closed Closed</li> </ul> </li> </ul></div>\[/code\]CSS\[code\]ul { -webkit-padding-start: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0px; -webkit-margin-end: 0px;}.nav { font-family:Verdana; font-size:12px; width:200px;}.nav { background-color: #F3E0A3; cursor: default; border: 1px solid #d2b48c; border-collapse:collapse;}.nav li.navhead { background-color: #F3E0A3; border: 1px solid #d2b48c; border-collapse:collapse;}.nav ul { list-style-image: none; list-style-position: outside; list-style: none;}.nav li { margin: 0; padding: 0; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.nav li .active {}.nav li.link { background-color: #ECE9D8;}.nav li.link:hover { cursor: pointer; background-color: #e1dfd2;}.nav ul li ul { padding-left: 10px;}\[/code\]