css二级菜单

白泽的笔记

已于 2022-07-26 19:32:14 修改

阅读量100

点赞数 1

于 2022-06-30 21:25:55 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/125548557

版权

CSS 导航栏下拉菜单悬浮效果绝对定位

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           ul{
               list-style: none;
           }
           a{
               text-decoration: none;
           }
           .clearfix::after{
               display: block;
               content: '';
               clear: both;
           }
           .nav{
               width: 1000px;
               margin: 0 auto;
               background-color: #ccc;
           }
           .nav .mynav>li{
               float: left;
           }
           .nav .mynav li{
               position: relative;
               width: 150px;
               height: 40px;
               text-align: center;
               line-height: 40px;
           }
           .nav li a{
               display: block;
               color: #111;
           }
           .nav li:hover{
               background-color: #f00;
           }
           .nav .subnav{
               display: none;
               position: absolute;
               top: 40px;
               left: 0;
               width: 150px;
               background-color: #ccc;
           }
           .nav li:hover .subnav{
               display: block;
           }
       </style>
   </head>
   <body>
       <div class="nav">
           <ul class="clearfix mynav">
               <li><a href="#">首页</a></li>
               <li>
                   <a href="#">活动</a>
                   <ul class="subnav">
                       <li><a href="#">去泰山看日出</a></li>
                       <li><a href="#">去泰国看人妖</a></li>
                       <li><a href="#">去日本看樱花</a></li>
                   </ul>
               </li>
               <li>
                   <a href="#">招聘</a>
                   <ul class="subnav">
                       <li><a href="#">web攻城狮</a></li>
                       <li><a href="#">UI设计师</a></li>
                       <li><a href="#">JAVA程序猿</a></li>
                       <li><a href="#">PYTHON大蟒蛇</a></li>
                   </ul>
               </li>
               <li><a href="#">帮助</a></li>
           </ul>
       </div>
   </body>
</html>