初级基础HTML CSS实现二级下拉菜单

2023-07-25 01:01| 来源: 网络整理| 查看: 265

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

1.HTML部分

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

英雄介绍 //使用一个div盒子来装下拉的内容选项裂空源氏麦克雷艾什安娜技能介绍脉冲炸弹巨龙来袭午时已到激素毁天灭地故事背景智械危机人工智能占领人工智能占领地图介绍巴黎 66号公路釜山花村漓江塔 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来实现，这里只是简单演示。小伙伴们可以通过自己的理解去运用所学的知识来实现。

【本文地址】

公司简介

联系我们