下拉菜单

我们通常做网页时会有下拉菜单的需求，有些小伙伴不会使用，那么我今天就教大家学习ul，li的下拉菜单

html这样写

<div class="t-top" id="list">
            <li>
                <a href="index.html">主页</a>
                <ul>
                    <li><a href="#">端午节习俗</a></li>
                    <li><a href="#">端午节由来</a></li>
                    <li><a href="#">端午节团圆</a></li>
                </ul>
            </li>
            <li>
                <a href="history.html">历史文化</a>
            </li>
            <img src="img/logo.jpg" alt="">
            <li>
                <a href="shop.html">我的商城</a>
            </li>
            <li>
                <a href="about.html">关于我们</a>
            </li>
        </div>

双层的ul是为了指向下拉

ul{
    list-style-type: none;
    position: fixed;

}
#list >li{
    float: left;
}
#list>li>ul{
    display: none;
    position: absolute;
    float: none;
}
#list>li:hover ul{
    display: block;
}
a:hover {
    background-color: burlywood;
}

css渲染一下就行

效果是这样的，你们也可以设置一下样式