abstract：<style> *{padding: 0;margin: 0;} /* 先重置一下html，消除HTML标签默认的内外边距 */ .wrap{width: 800px;margin: 0 auto;}
<style>
*{padding: 0;margin: 0;} /* 先重置一下html，消除HTML标签默认的内外边距 */
.wrap{width: 800px;margin: 0 auto;} /* 对导航的内容设置一个主体为800px的宽并使其居中 */
.clear{clear: both;} /* 清除浮动 */
a{text-decoration-line: none;} /* 去掉默认a标签的下划线 */
ul,li{list-style: none;}
nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;}
nav .level>li a{color: black;}
nav .level>li:hover{background: red;} /* 设置鼠标滑过后的样式 */
nav .two{display: none;} /* 先使二级菜单的内容隐藏 */
nav .level>li:hover .two{display: block;} /* 鼠标滑过一级菜单后的显示二级菜单 */
</style>
<nav>
<ul class="level">
<li><a href="">首页</a></li>
<li>
<a href="">栏目1</a>
<ul class="two">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li>
<a href="">栏目2</a>
<ul class="two">
<li>二级菜单4</li>
<li>二级菜单5</li>
<li>二级菜单6</li>
</ul>
</li>
<li>
<a href="">栏目3</a>
<ul class="two">
<li>二级菜单7</li>
<li>二级菜单8</li>
<li>二级菜单9</li>
</ul>
</li>
<li>
<a href="">栏目4</a>
<ul class="two">
<li>二级菜单10</li>
<li>二级菜单11</li>
<li>二级菜单12</li>
</ul>
</li>
<li>
<a href="">栏目5</a>
<ul class="two">
<li>二级菜单13</li>
<li>二级菜单14</li>
<li>二级菜单15</li>
</ul>
</li>
</ul>
</nav>
Correcting teacher：天蓬老师Correction time：2019-05-15 13:35:09
Teacher's summary：三级下拉菜单 , 有很多应用场景的, 也有很多实现方法