在這里我用的工具是Hbuilder~
參考代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .clearfix::after{ content: ""; display: block; clear: both; } .header{ display: block; color: white; width: 100%; height: 60px; line-height: 60px; background: darkseagreen; margin-top:-16px ; } .container{ width: 1500px; } .header .topnav>li{ float: left; margin: 0 20px; font-size: 18px; width:150px; list-style-type: none; text-align: center; box-sizing: border-box; position: relative; } .header .topnav>li a{ text-decoration: none; color: #F4F4F4; } .header .topnav>li a:hover{ color: #3C3C3C; } .header .topnav>li:hover{ background: lightsteelblue; border: 2px solid lightsteelblue; border-bottom: none; line-height: 56px; } .header .topnav>li .homework{ text-align: left; line-height: 1.5; width: 300px; display: none; border: 2px solid lightsteelblue; box-sizing: border-box; position: absolute; right: -2px; background: lightsteelblue; } .header .topnav>li:hover .homework{ display: block; } .header .topnav>li:hover::after{ content: ""; position: absolute; width: 100%; height: 8px; bottom:-2px; left: 0; background: lightsteelblue; } .homework li{ list-style-type: none; margin-left: -40px; } .homework ul li:hover{ background: darkseagreen; color: black; } .homework ul li a:hover{ color: black; } </style> </head> <body> <header class="header"> <div class="container"> <ul class="topnav clearfix"> <li><a href="#"target="_self" title="首頁">首頁</a></li> <li><a href="myself.html"target="_self"title="個人簡介">個人主頁</a></li> <li> <a href="homework.html"target="_self" title="我的作業">我的作業</a> <div class="homework"> <ul> <li><a href="chuqiaozhuan.html"target="_blank">楚喬傳</a></li> <li><a href="four_famous.html"target="_blank">四大名著</a></li> <li><a href="baidu.html"target="_blank">百度效果</a></li> <li><a href="fiction_form.html"target="_blank">小說排行榜</a></li> <li><a href="register_form.html"target="_blank">注冊頁面</a></li> <li><a href="homework.html"target="_blank">更多...</a></li> </ul> </div> </li> <li> <a href="https://mp.weixin.qq.com/s/R531xjLbywGxTbkPLeBTnA"target="_blank"title="待開發">原創文章</a> </li> <li> <a href="https://www.cnblogs.com/YC-Yanchu/"target="_blank"title="我的博客">我的博客</a> </li> </ul> </div> </header> </body> </html>
！！在這里解釋一下小疑點：
1.凡是用到浮動第一個就要想到清除浮動這個代碼
.clearfix::after{ content: ""; display: block; clear: both; }
2.這里用到了偽元素：:after 是為了遮住下拉菜單的上邊框露出來的部分，當然我這里可以不需要這一步，因為我設置下拉菜單的邊框的顏色和背景顏色一樣，並且背景顏色和一級菜單hover后顯示的顏色一樣，所以不需要設置偽元素來隱藏掉。
.header .topnav>li:hover::after{ content: ""; position: absolute; width: 100%; height: 8px; background: green; bottom:-2px; left: 0; background: lightsteelblue; }
比如說設置了下拉菜單的邊框為別的顏色，這里以黑色為例，看效果圖，你會發現“我的作業”的下邊框那里的黑色邊框不見了，這就是利用了偽元素:after來將它遮住了，其實它還是在的呢。
其他的就不一 一解釋啦，如果有疑問的話就在評論里留言吧，一定會回復的！感謝讀者的支持！