网页标题样式如下：

  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个路径难度是由易到难，虽然最后一个标题写的最好，但是个人还是建议按顺序看完，这样对于实现的逻辑比较清楚。