纯css3代码写下拉菜单效果

2022-04-22 23:18:14

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">

   <title>CSS3树形菜单</title>

   <style type="text/css">

     *{margin: 0;padding: 0;}

     body{background: #eee;font-size: 14px;font-family: "微软雅黑";}

     ul, li{list-style: none;}

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

     .nav{

       width: 210px;

       background: #b92422;

     }

     .nav ul li{

       position: relative;

     }

     .nava{

       width: 200px;

       display: block;

       height: 35px;

       line-height: 35px;

       padding-left: 10px;

       border-bottom: 1px solid #911c1c;

       box-shadow: 0 1px 1px #d03b39 inset;

       color: #fff;

     }

     .nav ul li span{

       position: absolute;

       top: 5px;

       right: 5px;

       height: 20px;

       line-height: 20px;

       background: #9e1919;

       padding: 0 5px;

       font-size: 12px;

     }

   .ntext{

     -webkit-transition:all 0.5s ease;

     -moz-transition:all 0.5s ease;

     -ms-transition:all 0.5s ease;

     -o-transition:all 0.5s ease;

     transition:all 0.5s ease;

   }

   .ntext a{

     display: block;

     background: #9e1919;

     border-bottom: 1px solid #821717;

     height: 30px;

     line-height: 30px;

     padding-left: 15px;

     -webkit-transition:all 500ms linear;

     -moz-transition:all 500ms linear;

     -ms-transition:all 500ms linear;

     -o-transition:all 500ms linear;

     transition:all 500ms linear;

   }

   .ntext a:hover{

     background: #ff6600;

     color: #fff;

   }

   .nav ul li .ntext{height: 0;overflow: hidden;}

   .nav ul li:target .ntext{height: auto;}

   </style>

 </head>

 <body>

   <div class="nav">

     <ul>

       <li id="n1">

         <a href="#n1" class="nava">IT培训<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n2">

         <a href="#n2" class="nava">语言培训<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n3">

         <a href="#n3" class="nava">亲子课堂<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n4">

         <a href="#n4" class="nava">中小学/大学<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

     </ul>

   </div>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">

   <title>CSS3树形菜单</title>

   <style type="text/css">

     *{margin: 0;padding: 0;}

     body{background: #eee;font-size: 14px;font-family: "微软雅黑";}

     ul, li{list-style: none;}

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

     .nav{

       width: 210px;

       background: #b92422;

     }

     .nav ul li{

       position: relative;

     }

     .nava{

       width: 200px;

       display: block;

       height: 35px;

       line-height: 35px;

       padding-left: 10px;

       border-bottom: 1px solid #911c1c;

       box-shadow: 0 1px 1px #d03b39 inset;

       color: #fff;

     }

     .nav ul li span{

       position: absolute;

       top: 5px;

       right: 5px;

       width:0;

       height:0;

       border-width:10px;

       border-style:dashed dashed dashed solid;

       border-color:transparent transparent transparent #fff;

       text-indent: -999px;

     }

   .ntext{

     -webkit-transition:all 0.5s ease;

     -moz-transition:all 0.5s ease;

     -ms-transition:all 0.5s ease;

     -o-transition:all 0.5s ease;

     transition:all 0.5s ease;

   }

   .ntext a{

     display: block;

     background: #9e1919;

     border-bottom: 1px solid #821717;

     height: 30px;

     line-height: 30px;

     padding-left: 15px;

     -webkit-transition:all 500ms linear;

     -moz-transition:all 500ms linear;

     -ms-transition:all 500ms linear;

     -o-transition:all 500ms linear;

     transition:all 500ms linear;

   }

   .ntext a:hover{

     background: #ff6600;

     color: #fff;

   }

   .nav ul li .ntext{height: 0;overflow: hidden;}

   .nav ul li:target .ntext{height: auto;}

   .nav ul li:target a span{

     border-style:solid dashed dashed dashed;

     border-color:#fff transparent transparent transparent;

     top:15px;

     right: 15px;

   }

   </style>

 </head>

 <body>

   <div class="nav">

     <ul>

       <li id="n1">

         <a href="#n1" class="nava">IT培训<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n2">

         <a href="#n2" class="nava">语言培训<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n3">

         <a href="#n3" class="nava">亲子课堂<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

       <li id="n4">

         <a href="#n4" class="nava">中小学/大学<span>更多</span></a>

         <div class="ntext">

           <a href="#">网页制作</a>

           <a href="#">编程语言</a>

           <a href="#">编程语言</a>

         </div>

       </li>

     </ul>

   </div>

 </body>

 </html>

码农公寓

相关文章