纯css3代码写下拉菜单效果

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
  6   <title>CSS3树形菜单</title>
  7   <style type="text/css">
  8     *{margin: 0;padding: 0;}
  9     body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
 10     ul, li{list-style: none;}
 11     a{color: #fff;text-decoration: none;}
 12     .nav{ 13       width: 210px;
 14       background: #b92422;
 15     }
 16     .nav ul li{ 17       position: relative;
 18     }
 19     .nava{ 20       width: 200px;
 21       display: block;
 22       height: 35px;
 23       line-height: 35px;
 24       padding-left: 10px;
 25       border-bottom: 1px solid #911c1c;
 26       box-shadow: 0 1px 1px #d03b39 inset;
 27       color: #fff;
 28     }
 29     .nav ul li span{ 30       position: absolute;
 31       top: 5px;
 32       right: 5px;
 33       height: 20px;
 34       line-height: 20px;
 35       background: #9e1919;
 36       padding: 0 5px;
 37       font-size: 12px;
 38     }
 39   .ntext{ 40     -webkit-transition:all 0.5s ease;
 41     -moz-transition:all 0.5s ease;
 42     -ms-transition:all 0.5s ease;
 43     -o-transition:all 0.5s ease;
 44     transition:all 0.5s ease;
 45   }
 46   .ntext a{ 47     display: block;
 48     background: #9e1919;
 49     border-bottom: 1px solid #821717;
 50     height: 30px;
 51     line-height: 30px;
 52     padding-left: 15px;
 53     -webkit-transition:all 500ms linear;
 54     -moz-transition:all 500ms linear;
 55     -ms-transition:all 500ms linear;
 56     -o-transition:all 500ms linear;
 57     transition:all 500ms linear;
 58   }
 59   .ntext a:hover{ 60     background: #ff6600;
 61     color: #fff;
 62   }
 63   .nav ul li .ntext{height: 0;overflow: hidden;}
 64   .nav ul li:target .ntext{height: auto;}
 65   </style>
 66 </head>
 67 <body>
 68   <div class="nav">
 69     <ul>
 70       <li id="n1">
 71         <a href="#n1" class="nava">IT培训<span>更多</span></a>
 72         <div class="ntext">
 73           <a href="#">网页制作</a>
 74           <a href="#">编程语言</a>
 75           <a href="#">编程语言</a>
 76         </div>
 77       </li>
 78       <li id="n2">
 79         <a href="#n2" class="nava">语言培训<span>更多</span></a>
 80         <div class="ntext">
 81           <a href="#">网页制作</a>
 82           <a href="#">编程语言</a>
 83           <a href="#">编程语言</a>
 84         </div>
 85       </li>
 86       <li id="n3">
 87         <a href="#n3" class="nava">亲子课堂<span>更多</span></a>
 88         <div class="ntext">
 89           <a href="#">网页制作</a>
 90           <a href="#">编程语言</a>
 91           <a href="#">编程语言</a>
 92         </div>
 93       </li>
 94       <li id="n4">
 95         <a href="#n4" class="nava">中小学/大学<span>更多</span></a>
 96         <div class="ntext">
 97           <a href="#">网页制作</a>
 98           <a href="#">编程语言</a>
 99           <a href="#">编程语言</a>
100         </div>
101       </li>
102     </ul>
103   </div>
104 </body>
105 </html>

View Code

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
  6   <title>CSS3树形菜单</title>
  7   <style type="text/css">
  8     *{margin: 0;padding: 0;}
  9     body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
 10     ul, li{list-style: none;}
 11     a{color: #fff;text-decoration: none;}
 12     .nav{ 13       width: 210px;
 14       background: #b92422;
 15     }
 16     .nav ul li{ 17       position: relative;
 18     }
 19     .nava{ 20       width: 200px;
 21       display: block;
 22       height: 35px;
 23       line-height: 35px;
 24       padding-left: 10px;
 25       border-bottom: 1px solid #911c1c;
 26       box-shadow: 0 1px 1px #d03b39 inset;
 27       color: #fff;
 28     }
 29     .nav ul li span{ 30       position: absolute;
 31       top: 5px;
 32       right: 5px;
 33       width:0;
 34       height:0;
 35       border-width:10px;
 36       border-style:dashed dashed dashed solid;
 37       border-color:transparent transparent transparent #fff;
 38       text-indent: -999px;
 39     }
 40   .ntext{ 41     -webkit-transition:all 0.5s ease;
 42     -moz-transition:all 0.5s ease;
 43     -ms-transition:all 0.5s ease;
 44     -o-transition:all 0.5s ease;
 45     transition:all 0.5s ease;
 46   }
 47   .ntext a{ 48     display: block;
 49     background: #9e1919;
 50     border-bottom: 1px solid #821717;
 51     height: 30px;
 52     line-height: 30px;
 53     padding-left: 15px;
 54     -webkit-transition:all 500ms linear;
 55     -moz-transition:all 500ms linear;
 56     -ms-transition:all 500ms linear;
 57     -o-transition:all 500ms linear;
 58     transition:all 500ms linear;
 59   }
 60   .ntext a:hover{ 61     background: #ff6600;
 62     color: #fff;
 63   }
 64   .nav ul li .ntext{height: 0;overflow: hidden;}
 65   .nav ul li:target .ntext{height: auto;}
 66   .nav ul li:target a span{ 67     border-style:solid dashed dashed dashed;
 68     border-color:#fff transparent transparent transparent;
 69     top:15px;
 70     right: 15px;
 71   }
 72   </style>
 73 </head>
 74 <body>
 75   <div class="nav">
 76     <ul>
 77       <li id="n1">
 78         <a href="#n1" class="nava">IT培训<span>更多</span></a>
 79         <div class="ntext">
 80           <a href="#">网页制作</a>
 81           <a href="#">编程语言</a>
 82           <a href="#">编程语言</a>
 83         </div>
 84       </li>
 85       <li id="n2">
 86         <a href="#n2" class="nava">语言培训<span>更多</span></a>
 87         <div class="ntext">
 88           <a href="#">网页制作</a>
 89           <a href="#">编程语言</a>
 90           <a href="#">编程语言</a>
 91         </div>
 92       </li>
 93       <li id="n3">
 94         <a href="#n3" class="nava">亲子课堂<span>更多</span></a>
 95         <div class="ntext">
 96           <a href="#">网页制作</a>
 97           <a href="#">编程语言</a>
 98           <a href="#">编程语言</a>
 99         </div>
100       </li>
101       <li id="n4">
102         <a href="#n4" class="nava">中小学/大学<span>更多</span></a>
103         <div class="ntext">
104           <a href="#">网页制作</a>
105           <a href="#">编程语言</a>
106           <a href="#">编程语言</a>
107         </div>
108       </li>
109     </ul>
110   </div>
111 </body>
112 </html>

View Code

转载于:https://www.cnblogs.com/MissBean/p/4347815.html

纯css3代码写下拉菜单效果相关推荐

css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
用Javascrip写出selelct下拉菜单效果
用Javascrip写出selelct下拉菜单效果话不多说,先上效果图: html代码: <p>2.模拟selelct下拉菜单</p><div class=" ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...

纯css3代码写下拉菜单效果

纯css3代码写下拉菜单效果相关推荐

最新文章

热门文章