javascript - 在下拉菜单的 li 元素旁边显示 div

Question

我需要以这种方式设计菜单，以便子菜单显示如下图所示

假设菜单 1、2、3 应在右侧显示相应的 div，菜单 4,5 应在菜单左侧显示 div 容器，如下图所示。

到目前为止，我已经设法让它在一定程度上发挥作用，但它并不完美。

问题

1. 我能够在子菜单 x 旁边显示相应的 div，但它显示在子菜单旁边，而我希望它显示在菜单子(monad)菜单容器的顶部。

2. 我希望它在将鼠标悬停在父菜单上时显示第一个子菜单作为默认选择，目前它不显示子菜单相关的文本和图像，除非我将鼠标悬停在子菜单上。

Fiddle Example

下面是代码。

<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>

Fiddle Example

如果我不介意将 jquery 与它一起使用以使其正常工作并显示，我将不胜感激。

Answer 1

喜欢这个链接帮助你

demo