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:0px;
    10.       } 
    11.       #title{
    12.           width: 120px;
    13.           height: 38px;
    14.           line-height: 38px;
    15.           text-align: center;
    16.           border:1px solid #ddd;
    17.           font-size: 14px;
    18.           cursor: pointer;
    19.       }
    20.       /* 列表样式 */
    21.       #list{
    22.           width: 120px;
    23.           list-style: none;
    24.           border:1px solid #ddd;
    25.           display: none;
    26.           border-radius:4px;
    28.       }
    29.       #list li{
    30.           width: 100%;
    31.           height: 30px;
    32.           line-height: 30px;
    33.           text-align: center;
    34.           font-size: 14px;
    35.           border-bottom:1px solid #ddd;
    36.       }    
    37.     </style>
    38.     <script type="text/javascript">
    39.       function show(){
    40.         document.getElementById("list").style.display = "block";
    41.         document.getElementById("title").style.color = "red";
    42.       }
    43.       function hide(){
    44.           document.getElementById("list").style.display = "none";
    45.         document.getElementById("title").style.color = "";
    46.       }
    47.     </script>
    48.   </head>
    49.   <body>
    50.     <p id="title" onmouseover="show()" onmouseout="hide()">卖家中心</p>
    51.     <ul id="list">
    52.         <li>免费开店</li>
    53.         <li>已卖出的宝贝</li>
    54.         <li>出售中的宝贝</li>
    55.         <li>卖家服务市场</li>
    56.         <li>卖家培训中心</li>
    57.     </ul>
    58.   </body>
    59. </html>

    2021-09-25_180737.jpg2021-09-25_180744.jpg2021-09-25_180750.jpg