1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>定位做导航</title>
  7.     <style>
  8.         *{
  9.             padding: 0px;
  10.         }
  11.         li{
  12.             width: 80px;
  13.             list-style: none;
  14.             font-size: 13px;
  15.             line-height: 30px;
  16.             text-align: center;
  17.             margin-left: 2px;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.             color: white;  
  22.         }
  23.         nav{
  24.             width: 800px;
  25.             height: 30px;
  26.             margin:auto;
  27.             background: red;
  30.         }
  31.         nav>ul{
  32.             width: 800px;
  33.             height: 30px;
  34.             background: red;
  36.         }
  37.         li:nth-child(2){
  39.             position: relative;
  40.             left: 80px;
  41.             top: -30px;
  42.         }
  43.         li:nth-child(3)
  44.         {
  45.             position: relative;
  46.             left: 160px;
  47.             top: -60px;
  48.         }
  49.         li:nth-child(4){
  50.             position: relative;
  51.             left: 240px;
  52.             top: -90px;
  53.         }
  54.         li:nth-child(5){
  55.             position: relative;
  56.             left: 320px;
  57.             top: -120px;
  58.         }
  59.         li:nth-child(6){
  60.             position: relative;
  61.             left: 400px;
  62.             top: -150px;
  63.         }
  64.         li:hover{
  65.             background: white;
  66.             border-top: 1px solid red;
  67.         }
  68.         li:hover>a{
  69.             color: black;
  70.         }
  71.     </style>
  72. </head>
  73. <body>
  74.     <nav>
  75.         <ul>
  76.             <li><a href="#">前端</a></li>
  77.             <li><a href="#">前端</a></li>
  78.             <li><a href="#">前端</a></li>
  79.             <li><a href="#">前端</a></li>
  80.             <li><a href="#">前端</a></li>
  81.             <li><a href="#">前端</a></li>
  82.         </ul>
  83.     </nav>
  84. </body>
  85. </html>