html - 全尺寸链接作为缩进嵌套无序列表中的 block ？

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/