I have the following list structure:

<ul>
    <li>One</li>
    <li>Two
        <ul>
             <li class="active">Two-1</li>
             <li>Two-2</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three-1</li>
        </ul>
    </li>
</ul>

with the following CSS:

ul li ul{
    display:none;
}
ul li:hover ul{
    display:block;
}

What I would like is this: When an li class is active, the entire structure down until the active class gets displayed.

so in the case provided the following would show, along with the top level:

• One
• Two
  • Two-1
  • Two-2
• Three

I'd like either a CSS or jQuery implementation (or mixture of the two) if possible.