纯css3代码写下拉菜单效果

 <!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>

纯css3代码写下拉菜单效果的更多相关文章

推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
CSS3小清新下拉菜单简易大方
之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...

随机推荐

Java——Socket编程（一）
1. 网络基础知识两台机器之间需要进行通信,需要满足的条件: 每个机器有一个唯一的标识符(IP地址): 他们之间进行通信需要用同一种语言(协议): 每台主机上面有多个应用程序,如QQ,微博,迅雷等, ...
matplotlib
前导: 安装 numpy http://sourceforge.net/projects/numpy/files/ http://sourceforge.net/projects/numpy/file ...
R语言保存文件 Error in save error writing to connection
Error in save(filtered, file = paste(sampleName, "filtered", sep = "_")) : err ...
Ubuntu升级没有声音的解决方法
自从安装U14.04LTS版本后,每次开机都会弹出update窗,以前因为网络速度慢没更新成功过,这回环境允许就尝试了下这个过程,很顺利,可更新后没声音了,找了N中方法来解决,像更改配置文件/etc/ ...
phpcms 修改后台主页面的模板
代码在phpcms/modules/admin/templates/main.tpl.php 在该文件修改就可以修改 phpcms后台管理系统的首页面.
vector的插入、lower_bound、upper_bound、equal_range实例
对于这几个函数的一些实例以便于理解: #include <cstdlib> #include <cstdio> #include <cstring> #includ ...
Websocket————错误总结
websocket 一.需要注意的是,js建立连接处完整的js代码要执行完成退出后才会真正发起建立连接请求,如果在此之前发送消息则会报错如下: InvalidStateError: An attemp ...
dateTimePicker的使用，时间控件
<li> <label>促销时间<span class="imprt">*</span></label> <inp ...
commons-logging日志系统
日志的重要性是随着系统的膨胀而显现的,在一个庞大的系统中查错没有各种日志信息是寸步难行的.所以在系统加入日志是必须的. 最原始的日志方式,就是在程序的适当地方添加System.out.prin ...
python中模块sys与os的一些常用方法
sys模块提供了访问或操作与python解释器相关方法与对象. 我们就列举出常用到的知识,以后,随着学习,不断补充. 几个常用到的动态对象: sys.argv,这是一个列表,它包含了所有传递给脚本的命 ...

纯css3代码写下拉菜单效果

纯css3代码写下拉菜单效果的更多相关文章

随机推荐

热门专题