python制作二级菜单_前端小白进阶笔记之多级菜单分享

css技术分享之二级、三级下拉菜单的制作：

首先看一下网页中的三级下拉菜单：

接下来自己动手试一试吧！

制作多级下拉菜单 在css中我们需要用到：

hover选择器用于选择鼠标指针浮动在上面的元素

display：none：隐藏元素

display:black：显示被隐藏的元素

第一步：搭建框架并填充内容

2017年

2018年

一月

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

二月

三月

四月

五月

六月

2019年

2020年

2021年

2022年

第二步：编写css样式

注意：子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class单独设置其属性。注释部分为下拉菜单隐藏，显示的样式。

*{

padding: 0;

margin: 0;

}

.c-year{

position: relative;

width: 60px;

height: 250px;

list-style-type: none;

background: rgba(0,0,0,.8);

color: #ffffff;

}

.c-year li{

width: 60px;

height: 40px;

line-height: 40px;

}

.c-month{

position: absolute;

top: 40px;

left: 60px;

width: 400px;

color: #ffffff;

background: rgba(0,0,0,.7);

text-align: center;

/*隐藏二级菜单*/

display: none;

}

.c-month li{

display: inline-block;

}

.c-day{

position: absolute;

top: 40px;

left:0;

background: rgba(0,0,0,.6);

display: inline ;

/*隐藏三级菜单*/

display: none;

}

/*给所有li在hover时添加背景颜色*/

.c-year li:hover{

background: rgba(255,255,255,.2);

}

/*当鼠标hover到年份时让月份显示*/

.c-year li:hover .c-month {

display: block;

}

/*当鼠标hover到月份时让日期显示*/

.c-month li:hover .c-day {

display: block;

}

此时可以得到如下效果图：

提示：二级菜单的制作需要注意的三个问题：

1、层级关系：年月日很好的诠释了多级下拉菜单的关系，当点击年份的时候可以让月份显示，点击月份的时候可以让日期显示，也就是说我们需要给要显示对象父级设置hover。

2、子元素会继承父元素的样式：在写css样式是我们会发现子元素会继承父元素的样式，如果想要改变样式，可以给要改变样式的对象一个id或者class单独设置其属性

3、position：relative(相对定位)/absolute(绝对定位)的用法。