练习二级标题

最新推荐文章于 2024-06-01 14:57:49 发布

小高三岁半

最新推荐文章于 2024-06-01 14:57:49 发布

阅读量50

点赞数 3

文章标签： css html javascript

本文链接：https://blog.csdn.net/G_0402/article/details/129938365

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
           margin: 0;
           padding: 0;
        }
        ul{
           list-style-type: none;
        }
        .nav{
            display: flex;
            align-items: center;
            background-color: #1e1d1d;
            color: white;
            width: 300px;
           
        }
        
        .nav>li{
           flex: 1;
           border:1px solid pink;
           position: relative;
           height: 38px;
           line-height: 38px;
        }

        .nav>li>ul{
           width: 100%;
           display: none;
           position: absolute;
           top:38px;
           background-color: #1e1d1d;
        }

       

   </style>
</head>
<body>
   <div class="wrapper">
       <ul class="nav">
           <li>
               <a href="#">卖家中心</a>
               <ul>
                   <li>免费开店</li>
                   <li>已卖出的宝贝</li>
                   <li>出售中的宝贝</li>
               </ul>
           </li>
           <li>
               <a href="#">网站导航</a>
               <ul>
                   <li>收藏的店铺</li>
                   <li>收藏的宝贝</li>
               </ul>
           </li>
       </ul>
   </div>
   <script>
       _navLis=document.querySelectorAll(".nav li");
       _navLis.forEach(_navLi => {
           _navLi.onmouseover=function(){
               this.children[1].style.display='block';
           }
           _navLi.onmouseout=function(){
               this.children[1].style.display='none';
           }
       });
   </script>
</body>

</html>