Trying to create CSS nav and having issue with sub elements - html

Question

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
<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>
CSS
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;
}

Answer 1

http://jsfiddle.net/LZqud/7/
HTML:
<li class="link link-with-sub">
<ul class="sub">
<li class="sublink">Open</li>
<li class="sublink">Closed Closed Closed Closed</li>
</ul>
</li>
CSS:
.nav li.link {
background-color: #ECE9D8;
}
.nav ul li ul.sub {
margin-left: -10px;
padding-left:0;
}
.nav ul li ul.sub li {
padding-left: 20px;
}
.nav li.link:hover, .nav ul.sub li.sublink:hover {
cursor: pointer;
background-color: #e1dfd2;
}
.nav li.link, .nav li.link-with-sub:hover {
background-color: #ECE9D8;
}

Answer 2

change the link class that wraps the inner one. so it doesn't change the background when hovered.
http://jsfiddle.net/btevfik/LZqud/6/
<li class="innerlink">
<ul>
<li class="link">Open</li>
<li class="link">Closed Closed Closed Closed</li>
</ul>
</li>
CSS
.nav li.innerlink {
background-color: #ECE9D8;
}

Answer 3

Just as simple as this,
replace the last block of CSS as shown below,
From:
.nav ul li ul {
padding-left: 10px;
}
To:
.nav ul li ul li{
margin-left: -10px;
padding-left: 20px;
}
Hope this is what you need..