我如何创建一个多层次的下拉菜单包含图像最好使用css

How can i create a multi-level dropdown menu containing images preferably using css?

本文关键字：图像 包含 下拉菜单 css 一个 何创建 创建 多层次      更新时间：2023-09-26

示例下拉菜单可以在BuzzFeed上看到。下拉关卡应该在鼠标悬停时打开，就像上面的例子一样。

我想这个小提琴就是你要找的。网上有很多这样的例子。您不需要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;
}
相关文章：