1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>导航条</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       *,body{
    8.         padding:0;
    9.         margin:0;
    10.       }
    11.       .main{
    12.         width:550px;
    13.         height:60px;
    14.       }
    15.       #list{
    16.         width:550px;
    17.         height:60px;
    18.         display:flex;
    19.           justify-content:center;
    20.           list-style-type:none;
    21.       }
    22.       .n1{
    23.         background-color:#ff89b2;
    24.         color:#FFF;
    25.         text-align:center;
    26.         line-height:60px;
    27.         font-size: 14px;
    28.         width:79px;
    29.       }
    30.       .active{
    31.         background-color:#ff4988;
    32.         color:#FFF;
    33.         text-align:center;
    34.         line-height:60px;
    35.         font-size: 14px;
    36.         width:79px;
    37.       }
    38.     </style>
    39.   </head>
    40.   <body>
    41.     <div class="main">
    42.       <ul id='list'>
    43.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">浪漫爱情</li>
    44.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">商务鲜花</li>
    45.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">精选礼品</li>
    46.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">花卉绿植</li>
    47.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">精品蛋糕</li>
    48.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">浪漫花束</li>
    49.         <li class='n1' onmouseover="show(this)" onmouseout="closeT(this)">卡通花束</li>
    50.       </ul>
    51.     </div>
    52.     <script type="text/javascript">
    53.       function show(e){
    54.        e.className = "active";
    55.       }
    56.       function closeT(event){
    57.         event.className = "n1"
    58.       }
    59.     </script>
    60.   </body>
    61. </html>

    2021-09-25_175046.jpg2021-09-25_175054.jpg