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

Question

BuzzFeed.上可以看到示例下拉菜单 下拉水平应在悬停时打开，就像上面显示的情况一样。

Answer 1

我认为 this fiddle 是您正在寻找的。互联网上有很多例子。您不需要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>

的 CSS：

#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;
}