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次のようなネストされたリストで これを行っています。

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

問題

liネストされたリストの高さのために親のサイズが変更されますが、リンクのli高さは 1 行だけです。リンクのサイズは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 に答える