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

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/