大家好，欢迎来到IT知识分享网。

我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过HTML和CSS来实现它呢？

1.HTML部分

HTML整体部分较为简单，看到这个结构，我们可以首先想到的是运用ul列表标签和a标签来整体实现。话不多说，代码如下：

    <header>
        <ul>
            <li>
                <a href="#">英雄介绍</a>
                <div class="box"> //使用一个div盒子来装下拉的内容选项
                    <a href="#">裂空</a>
                    <a href="#">源氏</a>
                    <a href="#">麦克雷</a>
                    <a href="#">艾什</a>
                    <a href="#">安娜</a>
                </div>
            </li>
            <li>
                <a href="#">技能介绍</a>
                <div class="box">
                    <a href="#">脉冲炸弹</a>
                    <a href="#">巨龙来袭</a>
                    <a href="#">午时已到</a>
                    <a href="#">激素</a>
                    <a href="#">毁天灭地</a>
                </div>
            </li>
            <li>
                <a href="#">故事背景</a>
                <div class="box">
                    <a href="#">智械危机</a>
                    <a href="#">人工智能</a>
                    <a href="#">占领</a>
                    <a href="#">人工智能</a>
                    <a href="#">占领</a>
                </div>
            </li>
            <li>
                <a href="#">地图介绍</a>
                <div class="box">
                    <a href="#">巴黎</a>
                    <a href="#">66号公路</a>
                    <a href="#">釜山</a>
                    <a href="#">花村</a>
                    <a href="#">漓江塔</a>
                </div>
            </li>
        </ul>

2. CSS样式部分

css样式部分，主要运用一些比较基础的排班和样式进行样式的实现。如flex布局（或者浮动），简单的背景设置，以及hover的基础用法，动画的基础用法。

      *{ 
   
            margin: 0;
            padding: 0;
        }
        body{ 
   
            background: url(./2.jpg) no-repeat;
            background-size:cover;
        }
        header{ 
   
            height: 50px;
            width: 100%;
            background: linear-gradient(200deg,#e3c5eb, #a9c1ed);
        }
        ul{ 
   
            height: 50px;
            display: flex;
            list-style: none;
            justify-content: center;
            line-height: 50px;
        }
        li{ 
   
            text-align: center;
            width: 150px; 
        }
        .box{ 
   
            background: linear-gradient(200deg,#e3c5eb, #a9c1ed);
            opacity: 0.9;
             /* 第1步：设置初始值 */
             height:0;
            overflow:hidden; //因为初始值高度为0，我们需要将下拉列表中的文字全部隐藏
            /* 第3步：在要实现动画的标签上添加transition属性 */
            transition:all 1.5s;   //设置动画 all所有发生变化的css属性都添加过渡（这里是高度变化，可以只设置高度） 过渡时间为1s
        }
        a{ 
   
            text-decoration: none;
            color: #555;
            display: block; //将a标签设置为块标签，a标签就会独占一行，有序排列成列表
        }
        a:hover{ 
   
            background-color: deeppink;
        }
        li:hover .box{ 
   
        //第2步 动画，设置目标值
             height: 250px;
         }

3.总结

该下拉列表菜单为基础版本，只是为了初学者们方便了解通过基础的HTML和CSS如何简单的去实现。网页下拉菜单列表制作方法有很多，后续也可以运用js来实现，这里只是简单演示。小伙伴们可以通过自己的理解去运用所学的知识来实现。