0

リスト：

    <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>
                           <ul>
                              <li><a href="#">Item 1-1-2-1</li>
                           </ul>
                        </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>

関連する CSS を次に示します。

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    display: block;
}

最初のものはすべてのドロップダウン項目を非表示にします。2 番目は、親 #nav ul li:hover の子であるすべての ul と一致します。その場合、display:block とドロップダウンが表示されます。

アイテムをホバリングすると、その中のアイテムが単に下にリストされるため、これは私が達成しようとしているものではありません。アイテム 1-1-1 とアイテム 1-1-2 をアイテム 1-1 の右側に移動したいのですが、アイテム 1-1-1 は右側にある必要があり、アイテム 1-1-2 は移動します。その下にあります (ドロップダウン リストとして機能します)。その要素をどのように選択するかわかりません。例: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

これが私がこれまでに得たものです：

http://jsfiddle.net/Gq8C2/

次のような最初の子で試しました：

#nav ul li:hover > ul li:first-child {
    display: block;
}

絶対位置と相対位置も使用してみましたが、ほぼ希望どおりの結果が得られましたが、最初のアイテムを取得できませんでした...

これを行うにはもっと良い方法があるはずです...

どのように選択すればよいですか？また、上記で説明したのと同様の動作を行うにはどうすればよいですか?

4

2 に答える 2

0

このフィドルを確認してくださいhttp://jsfiddle.net/Gq8C2/10/

position:absoluteサブサブメニューに使用します：

#nav ul li ul li ul {
  position:absolute;
  top:0;
  left:100%;
}

コードをアップグレードするために、次のようにメニューの各レベルにクラスを割り当てることができます

<ul class="Third_level">
于 2013-11-08T22:23:11.503 に答える
0

再発明するのではなく、リンク先のページの css/html をそのまま使用してみませんか?

HTML:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

CSS

于 2013-11-08T22:14:43.053 に答える