3

我有一个嵌套列表，其中包含链接。不幸的是，我无法更改 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嵌套列表上的 a 来执行此操作，例如： 

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/

4

1 回答 1

1

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

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

于 2012-06-14T08:22:33.127 回答