【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

相关阅读:
java计算机毕业设计无人智慧药柜系统设计源码+lw文档+系统+数据库
2023数维杯国际赛数学建模D题完整论文分享！
Pr：更改剪辑的速度和持续时间
博途PLC浮点数拆分为高低16位字(AT覆盖指令应用)
使用langchain-chatchat里，faiss库中报错： AssertionError ，位置：assert d == self.d
Python 爬虫 NO.4 HTTP 响应状态码
kafka-listener
C语言数组全面解析：从初学到精通
2024最新-ubuntu22.04安装最新版QT6.6～6.8教程
我的创作纪念日———C/C++之动态内存管理

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