1

jsfiddle: http://jsfiddle.net/B3ARu/

ドロップダウンナビゲーションを構築しています。私の現在のソリューションでは、(いくつかの CSS ハック) を使用して 4 つのネストされたリストを管理できます。しかし、これを達成するためのより良い方法が必要であり、必要に応じてネストされたアイテムをいくつでも持つことができます。

<div id="menu">

    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li>
                    <a href="#">Item 1-1</a>
                    <ul>
                        <li><a href="#">Item 1-1-1</a></li>
                        <li><a href="#">Item 1-1-2</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 1-2</a></li>
                <li><a href="#">Item 1-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>

</div>

CSS

    #menu>ul>li ul>li ul {
    height:100%;
    position:absolute;
    bottom:-100%;
}

#menu>ul>li ul>li ul>li {
    display: none !important;
}

#menu>ul>li ul>li:hover ul>li {
    display:block !important;
    float: left;
    margin-left: 20px;
}

#menu>ul>li ul>li ul>li ul>li {
    visibility: hidden;

}
  1. ネストされたアイテムを希望どおりにできるようにするにはどうすればよいですか?
  2. display: none が突然動作を停止するのはなぜですか?
4

1 に答える 1

0

必要な数のドロップダウン メニューを実行するには、クラスを使用してある種の再帰的な動作を行うことができます。

http://jsfiddle.net/3BkFu/

HTML :

<ul class="dropdown">
    <li class="menu-item"><a href="#">Item</a>
        <ul class="dropdown">
            <li class="menu-item"><a href="#">Sub Item</a>
                <ul class="dropdown">
                    <li class="menu-item"><a href="#">Sub sub Item</a>
                        <ul class="dropdown">
                            <li class="menu-item"><a href="#">Sub sub sub Item</a></li>
                            <li class="menu-item"><a href="#">Sub sub sub Item 2</a>
                                <ul class="dropdown">
                                    <li class="menu-item"><a href="#">Sub sub sub sub Item</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sub Item 2</a></li>
        </ul>
    </li>
</ul>

CSS :

.dropdown
{
    list-style-type : none;
    background-color : gray;
    padding:0;
}

.menu-item
{
    position : relative;
    display : inline-block;
    width : 100px;
}

.menu-item>.dropdown
{
    position:absolute;
    float:left;
    display : none;
    margin-left : 25px;
    border-style : solid;
    border-width : 1px;
    border-color:lightgray;
}
.menu-item:hover>.dropdown
{
    display : block;
    width : 150px;
}

お役に立てば幸いです。

于 2013-11-07T13:46:11.823 に答える