Full sized links as block in indented nested unordered list?

Question

I have a nested list with links in it. Unfortunately I cannot change the HTML structure, because the HTML is generated as it is.

HTML

<ul>
    <li>
        <a href="http://www.google.com">Link Level 1</a>
            <ul>
                <li><a href="http://www.amazon.com">Nested Link</a></li>
                <li><a href="http://www.amazon.com">Nested Link</a></li>
                <li><a href="http://www.amazon.com">Nested Link</a></li>
            </ul>
    </li>
</ul>

Layout

I have to indent the nested lists and I'm doing this with a margin-left on the nested lists like:

ul {
    width: 200px;
}
ul li ul {
    margin-left: 200px;
}

Issue

The parent li gets resized because of the nested list's height, but the link of the li has the height of one line only. The link is not sized as large as the li / fully clickable.

I'm not able to make the link the size of the parent li and be clickable. I was thinking of something like:

ul li a {
    min-height: 20px;
    height: 100%;
    display: block; /* or inline-block */
    /* z-index has no effect on this */
}

http://imageshack.us/photo/my-images/7/sitemapul.png/

Please review the sample more more details on the code.

Sample

You can find a simple working sample and the not working sample with nested lists here:
http://jsfiddle.net/Dc6wS/3/

Answer 1

Only solution i can think of is with jQuery / javascript.

http://jsfiddle.net/Dc6wS/7/ or http://jsfiddle.net/Dc6wS/8/