Question

我需要以这样的方式设计菜单，以便子菜单显示在 enter image description here 下方的图像中

让我们说菜单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>

Fiddle Example

我会很感激这方面的帮助，我不介意使用jquery，以使其正常工作并显示。

Answer 1

喜欢这个links helping you

<强> demo

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

1 个答案: