サブメニューが下の画像のように表示されるようにメニューを設計する必要があります
下の画像に示すように、メニュー 1、2、3 は右側に対応する div を表示し、メニュー 4、5 はメニューの左側に div コンテナを表示する必要があるとします。
これまでのところ、ある程度機能させることができましたが、完全ではありません。
これに関する問題
サブメニュー x の横に対応する div を表示できますが、メニュー サブメニュー contianer の TOP から表示したいときに、サブメニューの横に表示します。
親メニューにカーソルを合わせたときに最初のサブメニューをデフォルトの選択として表示したいのですが、現在、サブメニューにカーソルを合わせない限り、サブメニュー関連のテキストと画像は表示されません。
以下はコードです。
<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を使用してもかまわないので、適切に機能して表示できるようにするために、これについて助けていただければ幸いです。