Javascript 如何创建包含图像（最好使用css）的多级下拉菜单？

可以在上看到示例下拉菜单 如上图所示，悬停时应打开下拉级别。

我认为正是您需要的。互联网上有大量的例子。您不需要JavaScript或jQuery来完成这项工作。当然，这是可能的，但您可以通过纯CSS实现这一点

HTML:

<div id="menu">
    <ul>
        <li class="parent"><a href="#">Parent1</a></li>
        <li class="parent"><a href="#">Parent2</a>
            <ul>
                <li class="first">
                    <a href="#">Child1</a>
                    <img src="http://marketingland.com/wp-content/ml-loads/2013/04/google-g-logo-2012-100x100.png" alt="img1" title="img1" height="40" width="40" />
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
                </li>
                <li>
                    <a href="#">Child2</a>
                    <img src="http://marketingland.com/wp-content/ml-loads/2013/04/google-g-logo-2012-100x100.png" alt="img1" title="img1" height="40" width="40" />
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
                </li>
                <li>
                    <a href="#">Child3</a>
                    <img src="http://marketingland.com/wp-content/ml-loads/2013/04/google-g-logo-2012-100x100.png" alt="img1" title="img1" height="40" width="40" />
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
                </li>
            </ul>
        </li>
        <li class="parent"><a href="#">Parent3</a></li>
        <li class="parent"><a href="#">Parent4</a></li>
    </ul>
</div>

#menu ul{
    padding:0;
    margin:0;
}

#menu li{
    list-style-type:none;
}

.parent{
    float:left;
    margin-left:20px;
}

#menu a{
    text-decoration:none;
}

#menu ul ul{
    display:none;
    width:300px;
    background:orange;
}

#menu ul li:hover > ul{
    display:block;
}

#menu ul li ul li{
    padding-top:40px;
    display:inline;
}

#menu ul li ul li a{
    float:left;
}

#menu ul li ul li img{
    float:left;
}

.first{
    padding-top:0 !important;
}

---

这对你有帮助吗？如果将鼠标悬停在其中一个子元素上后，我希望在右侧打开另一组类似的子元素，而不是在每个元素的底部打开该怎么办？是否希望子项彼此相邻，还是希望为子项添加另一个子菜单？您的问题也有类似的线索。所以我找到了小提琴并对它进行了编辑。这就是你的意思吗？我创建了第一级下拉列表，它会在hover上下拉。但是，现在当我在drpdown的一个子元素上悬停时，我希望能够查看与BuzzFeed中的图像和文本类似的相关窗口。正如我们在BuzzFeed中的Entertainment选项卡上悬停一样，会打开一个下拉列表。现在，当我们将鼠标悬停在“名人”选项卡上时，现有容器中会打开一个新窗口。请提前感谢。