网页标题样式如下：
1 <html>
2 <head>
3 <title>标题示例</title>
4 <meta charset="UTF-8">
5 <style>
6 /*在全局上清除盒模型的margin和padding*/
7 * {
8 margin: 0;
9 padding: 0;
10 box-sizing: padding-box;
11 }
12 body {
13 padding-top: 100px;
14 text-align: center;
15 }
16 /*清除ul li的前缀*/
17 ul li {
18 list-style: none;
19 }
20 /*清除超链接的下划线*/
21 a {
22 text-decoration: none;
23 }
24 /*给标题容器div设置CSS*/
25 div.menuDiv {
26 position: relative;
27 /* menu header width and height */
28 height: 30px;
29 width: 610px;
30 border: #aabbff solid 2px;
31 display: block;
32 margin: 0 auto;
33 }
34 div.menuDiv ul a {
35 line-height: 30px;
36 }
37 /*设置以及标题的样式*/
38 div.menuDiv > ul {
39 margin: 0;
40 padding: 0;
41 position: absolute;
42 height: 100%;
43 width: 100%;
44 list-style-type: none;
45 background-color: #fffabf;
46 /*该语句的意义在哪里？*/
47 overflow: visible;
48 }
49 div.menuDiv > ul > li {
50 border-right: #aabbff solid 2px;
51 }
52 div.menuDiv > ul > li:last-child {
53 border-right: none;
54 }
55 div.menuDiv ul li {
56 display: block;
57 float: left;
58 height: auto;
59 width: 120px;
60 }
61
62 /*设置二级标题的默认样式*/
63 div.menuDiv > ul > li > ul {
64 display: none;
65 position: static;
66 background-color: yellow;
67 /*border: 1px #666666 solid;*/
68 }
69
70 /*这句话是二级菜单生成的核心部分*/
71 div.menuDiv li:hover > ul {
72 display: block;
73 }
74
75 /*设置三级标题的默认样式*/
76 div.menuDiv ul ul li {
77 position: relative;
78 float: none;
79 display: block;
80 }
81 div.menuDiv ul ul ul {
82 display: none;
83 position: absolute;
84 float: none;
85 top: 1px;
86 left: 120px;
87 margin: 0;
88 }
89 div.menuDiv ul ul ul li {
90 border: black solid 1px;
91 background: lightblue;
92 }
93 </style>
94 </head>
95 <body>
96 <div class="menuDiv">
97 <ul>
98 <li>
99 <a href="#">1</a>
100 <ul>
101 <li>
102 <a href="#">1.1</a>
103 <ul>
104 <li><a href="#">1.1.1</a></li>
105 <li><a href="#">1.1.2</a></li>
106 <li><a href="#">1.1.3</a></li>
107 </ul>
108 </li>
109 <li>
110 <a href="#">1.2</a>
111 </li>
112 <li>
113 <a href="#">1.3</a>
114 </li>
115 </ul>
116 </li>
117 <li><a href="#">2</a></li>
118 <li><a href="#">3</a></li>
119 <li><a href="#">4</a></li>
120 <li><a href="#">5</a></li>
121 </ul>
122 </div>
123 </body>
124 </html>
参考路径：
1. 二级菜单的实现：https://www.cnblogs.com/wuqianling/p/6762146.html
2. 三级标题的实现：https://www.cnblogs.com/lucky-lf/p/7090083.html
3. MDN文档示例：https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html
PS：个人感觉这3个路径难度是由易到难，虽然最后一个标题写的最好，但是个人还是建议按顺序看完，这样对于实现的逻辑比较清楚。