JS下拉菜单

jiabaMG

已于 2023-12-15 08:39:38 修改

阅读量763

点赞数 18

文章标签： javascript

于 2023-12-14 22:31:09 首次发布

本文链接：https://blog.csdn.net/m0_70242615/article/details/134972247

版权

效果：

代码：

           body {
               font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
               font-size: 14px;
               color: #666;
           }

           a {
               text-decoration: none;
               color: #333;
           }

           ul li {
               list-style: none;
           }

           .container {
               width: 1180px;
               margin: 0 auto;
           }

           .header {
               width: 100%;
               height: 50px;
               line-height: 50px;
               font-size: 16px;
               font-weight: 500;
               background-color: #fff;
           }

           .header nav a {
               color: #fff;
           }

           .header nav a:hover {
               color: rgba(255, 0, 0, 0.5);
               background-color: #fff;
           }

           .header .container .nav {
               background-color: rgba(255, 85, 127, 0.6);
           }

           .header>.container>.nav>li {
               display: inline-block;
               position: relative;
               width: 100px;
               text-align: center;
           }

           .header>.container>.nav>li>a {
               padding: 15px 33px;
           }

           .header>.container>.nav>li>ul {
               display: none;
               position: absolute;
               width: 100%;
               text-align: center;
               background-color: #000;
           }

           .header>.container>.nav>li>ul li a {
               padding: 13px 17px;
           }

           .header>.container>.nav>li>ul li a:hover {
               border: 1px solid #333;
           }
       </style>
   </head>
   <body>
       <header class="header">
           <nav class="container">
               <ul class="nav">
                   <li><a href="#">首页</a></li>
                   <li>
                       <a href="#">人物</a>
                       <ul>
                           <li><a href="#">小孩壁纸</a></li>
                           <li><a href="#">纹身壁纸</a></li>
                           <li><a href="#">帅哥壁纸</a></li>
                           <li><a href="#">帅哥壁纸</a></li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">壁纸</a>
                       <ul>
                           <li><a href="#">风景壁纸</a></li>
                           <li><a href="#">建筑壁纸</a></li>
                           <li><a href="#">动物壁纸</a></li>
                           <li><a href="#">人物壁纸</a></li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">漫画</a>
                       <ul>
                           <li><a href="#">风景壁纸</a></li>
                           <li><a href="#">建筑壁纸</a></li>
                           <li><a href="#">动物壁纸</a></li>
                           <li><a href="#">人物壁纸</a></li>
                       </ul>
                   </li>
               </ul>
           </nav>
       </header>
       <script>
           $(function() {
               $(".nav>li").mouseover(function() {
                   $(this).children("ul").show();
               });
               $(".nav>li").mouseout(function() {
                   $(this).children("ul").hide();
               })
           })
       </script>
   </body>