0

サブメニューが下の画像のように表示されるようにメニューを設計する必要がありますここに画像の説明を入力

下の画像に示すように、メニュー 1、2、3 は右側に対応する div を表示し、メニュー 4、5 はメニューの左側に div コンテナを表示する必要があるとします。

これまでのところ、ある程度機能させることができましたが、完全ではありません。

これに関する問題

  1. サブメニュー x の横に対応する div を表示できますが、メニュー サブメニュー contianer の TOP から表示したいときに、サブメニューの横に表示します。

  2. 親メニューにカーソルを合わせたときに最初のサブメニューをデフォルトの選択として表示したいのですが、現在、サブメニューにカーソルを合わせない限り、サブメニュー関連のテキストと画像は表示されません。

フィドルの例

以下はコードです。

<nav>
    <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a>
            <ul>
                <li><a href="#">Menu 1</a>
                    <ul class="block">
                        <li><div class="div">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a>
                    <ul class="block">
                        <li><div class="div">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
               </li>
                <li><a href="#">Menu 3</a>
                    <ul class="block-right">
                        <li><div class="div-right">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
               </li>
            </ul>
        </li>
        <li><a href="#">Menu3</a>
            <ul>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu4</a></li>
        <li><a href="#">Menu 5</a>
            <ul>
                <li><a href="#">Menu 1</a>
                    <ul class="block">
                        <li><div class="div">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a>
                    <ul class="block">
                        <li><div class="div">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
               </li>
                <li><a href="#">Menu 3</a>
                    <ul class="block">
                        <li><div class="div">This  block show some text and an image on the right side of the text </div></li>
                    </ul>
               </li>
            </ul>
        </li>
    </ul>
</nav>

フィドルの例

jqueryを使用してもかまわないので、適切に機能して表示できるようにするために、これについて助けていただければ幸いです。

4

1 に答える 1

2

このようなlinks helping you

デモ

于 2013-09-30T06:30:23.503 に答える