【Web前端二级导航栏】

简单的Web前端二级导航栏示例:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级导航栏title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				/* 设置自动内减 */
				box-sizing: border-box;
			}
			/* 取消li标签的点样式效果 */
			li{
				
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.nav{
				width: 1400px;
				height: 100px;
			}
			.box>li{
				width: 25%;
				height: 60px;
				float: left;
			}
			.box>li>a{
				
				width: 100%;
				height: 60px;
				display: block;
				background-color: #2c7d2c;
				/* 字体设置 */
				font-size: 22px;
				font-weight: 800;
				color: #ffffff;
				/* 内容布局 */
				text-align: center;
				line-height: 60px;
				
			}
			
			.box>li:hover>a{
				color: #414141;
				background-color: #79fb79;
			}
			
			.box_lev2>li{
				width: 100%;
				height: 45px;
				overflow: hidden;
			}
			
			.box_lev2>li>a{
				width: 100%;
				height: 45px;
				display: block;
				background-color: #01703a;
				/* 字体设置 */
				font-size: 18px;
				font-weight: 800;
				color: #ffffff;
				/* 内容布局 */
				text-align: center;
				line-height: 45px;
			}
			
			.box_lev2{
				display: none;
			}
			.box_lev2>li>a:hover{
				background-color: #34e590;
			}
			
			.box>li:hover .box_lev2{
				display: block;
			}
		style>
	head>
	<body>
		<div class="nav">
			<ul class="box">
				<li><a href="">1导航栏a>
					<ul class="box_lev2">
						<li><a href="">1二级导航a>li>
						<li><a href="">2二级导航a>li>
						<li><a href="">3二级导航a>li>
					ul>
				li>
				<li><a href="">2导航栏a>li>
				<li><a href="">3导航栏a>li>
				<li><a href="">4导航栏a>li>
			ul>
			
		div>
	body>
html>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

相关阅读:
32？64？
SpringBoot线程上下文传递数据
《增长黑客》思维导图
string和stringbuilder
维持原判，链家程序员删除9TB数据二审判7年；AirPods或将换用USB-C接口；马斯克被推特指责违反保密协议|极客头条
React学习笔记
Python语言：散修笔记
记一次【RabbitMQ集群网络分区】的问题，以及网络分区时的影响范围和如何恢复
01| GitOps与DevOps 主流系统
C- 内联汇编实现puts函数

原文地址：https://blog.csdn.net/sakura22123/article/details/126637913