全尺寸链接作为缩进嵌套无序列表中的块

Question

我有一个嵌套列表，里面有链接。不幸的是，我无法更改 HTML 结构，因为 HTML 是按原样生成的。

.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>

布局

我必须缩进嵌套列表，并且我在嵌套列表上有一个margin-left来执行此操作，例如：

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

问题

父li由于嵌套列表的高度而调整大小，但li的链接只有一行的高度。链接的大小不如li/完全可点击。

我无法使链接的大小达到父li的大小并可单击。我在想这样的事情：

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/

请查看示例，了解有关代码的更多详细信息。

样本

您可以在此处找到一个简单的工作示例和带有嵌套列表的不工作示例：
http://jsfiddle.net/Dc6wS/3/

Answer 1

我能想到的唯一解决方案是使用jQuery/javascript。

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