纯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效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...

随机推荐

1-NPM
什么是NPM NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...
3DES 加解密
using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Comm ...
【Unity3D游戏开发】性能优化之缩减打包压缩包大小 (二八)
unity3d打包的所有文件是会被记录而且被排序的.所以这大大方便了我们分析为何打包文件如此之大,以及怎么减少打包文件. 日志目录一般在:C:\Users\Administrator\AppData\ ...
libreoffice实现WORD文档转PDF文档
一.安装LibreOffice 官网:http://www.libreoffice.org/ 二.CentOS安装yum yum install libreoffice 三.执行转换命令 libreo ...
【转】Kali Linux 新手折腾笔记
原作者:http://defcon.cn/1618.html 最近在折腾Kali Linux 顺便做一简单整理,至于安装就不再多扯了,估计会出现的问题上一篇文章<VMware虚拟机安装Kali ...
5.4.1 termios结构，关闭回显功能，一键入字符fgetc立刻返回，不用按下回车键
Linux提供了一组编程接口,用来控制终端驱动程序的行为.这样我们可以更精细的来控制终端. 例如: 回显:允许控制字符的回显,例如读取密码时. 使用termios结构的密码程序 #include &l ...
div相对浏览器移动
<% String path = request.getContextPath();%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
C# 线程（五）：线程池
From : http://kb.cnblogs.com/page/42531/ 在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然 ...
Linux vi 中移动光标命令
移动光标上:k nk:向上移动n行 9999k或gg可以移到第一行 G移到最后一行下:j nj:向下移动n行左:h nh:向左移动n列右:l nl:向右移动n列 w:光标以单词向前移动 nw:光标向 ...
mysql概要（三）having
1.运算符 2.模糊查询 3.where 后的判断基于表(表的直接内容),而不是基于结果(运算之后的别名)如: 可改成在where后再次重新计算判断: 或者使用having对结果判断: having多 ...

纯css3代码写下拉菜单效果

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

随机推荐

热门专题