我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过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来实现，这里只是简单演示。小伙伴们可以通过自己的理解去运用所学的知识来实现。

初级基础HTML CSS实现二级下拉菜单相关推荐

兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单，jquery - phpStudy
用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...
动态左侧二级下拉菜单基于bootstrap js
动态左侧二级下拉菜单 html代码: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

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

1.HTML部分

2. CSS样式部分

3.总结

初级基础HTML CSS实现二级下拉菜单相关推荐

最新文章

热门文章