0

我需要以这样的方式设计菜单，以便子菜单如下图所示在此处输入图像描述

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

到目前为止，我已经能够让它在某种程度上发挥作用，但它并不完美。

与此有关的问题

  1. 我能够在子菜单 x 旁边显示相应的 div，但它显示在子菜单旁边，而我希望它从菜单子菜单 contianer 的顶部显示。

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