<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试一下</title>

</head>

<style>

    *{

        padding:0;

        margin: 0;

    }

      .top-nav{

         width:900px;

         margin:0 auto;

         border: 1px solid #222;

         background-image:linear-gradient(#444,#111);

         border-radius: 6px;

         box-shadow: 0 1px 1px #777;

         padding:0;

         list-style: none;

          /*overflow: hidden;*/

          overflow: visible;

     }

      .top-nav:before,.top-nav:after{

          content: "";

          display:table;

      }

      .top-nav:after{

          clear:both;

      }

    .top-nav li{

        float: left;

        border-right: 1px solid #222;

        box-shadow: 1px 0 0 #444;

        position:relative;

    }

    .top-nav li a {

        float:left;

        padding:12px 30px;

        color:#999;

        font:bold 12px;

        text-decoration: none;

        text-shadow: 0 1px 0 #000;

    }

    .top-nav li a:hover{

        color:#fafafa;

    }

    .top-nav li ul{

        visibility:hidden;

        position: absolute;

        list-style: none;

        top:41px;

        left:0;

        z-index: 1;

        padding:0;

        background-color: #444;

        background-image: linear-gradient(#444,#111);

        box-shadow: 0 -1 0 rgba(255,255,255,.3);

        border-radius: 3px;

        opacity: 0;

        margin:20px 0 0 0;

        transition:all .2s ease-in-out;

    }

      .top-nav li:hover >ul{

          opacity:1;

          visibility: visible;

          margin: 0;

      }

    .top-nav ul li{

        float: none;

        display:block;

        border:0;

        box-shadow: 0 1px 0 #111 ,0 2px 0 #666;

    }

    .top-nav ul a{

        padding:10px;

        width:130px;

        display: block;

        float: none;

    }

    .top-nav ul a:hover{

        background-color: #0186ba;

        background-image:liner-gradient(#04acec,#0186ba);

    }

    .top-nav ul li:first-child>a{

        border-radius: 3px 3px 0 0;

    }

   .top-nav ul li :last-child>a{

       border-radius:0 0 3px 3px;

   }

    .top-nav ul li :first-child > a:before{

        content:"";

        position:absolute;

        left:40px;

        top:-6px;

        border-bottom:6px solid #0299d3;

        border-left:6px solid transparent;

        border-right:6px solid transparent;

    }

    .top-nav ul li :first-child > a:before{

        border-bottom-color:#04acec;

    }

    .top-nav ul ul {

        top:0;

        left:150px;

        margin:0 0 0 20px;

        box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    .top-nav ul ul li:first-child a:before{

        left:-6px;

        top:50%;

        margin-top:-6px;

        border-left: 0;

        border-bottom: 6px solid transparent;

        border-top: 6px solid transparent;

        border-right: 6px solid #3b3b3b;

    }

    .top-nav ul ul li:first-child a:hover:before{

        border-right-color: #0299d3;

        border-bottom-color:transparent;

    }

</style>

<body>

          <ul class="top-nav">

              <li><a href="#">慕课网</a></li>

              <li><a href="#">课程大厅</a></li>

              <li><a href="#">学习中心</a>

                   <ul>

                        <li><a href="#">前端课程</a>

                             <ul>

                                 <li><a href="#">html</a></li>

                                 <li><a href="#">javascript</a></li>

                                 <li><a href="#">css</a></li>

                             </ul>

                       </li>

                       <li ><a href="#">手机开发</a></li>

                       <li ><a href="#">后台编程</a></li>

                   </ul>

              </li>

              <li><a href="">关于我们</a></li>

          </ul>

</body>

</html>

css3实现动画导航菜单尖角

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画导航尖角</title>

    <style>

        .box{

            display: block;

            width: 0;

            border-bottom: 10px solid  red;

            border-left:10px solid transparent;

            border-right:10px solid transparent;

            border-top:10px solid transparent;

        }

    </style>

</head>

<body>

   <div class="box"></div>

</body>

</html>

纯CSS3实现动态导航栏目的更多相关文章

  1. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  2. 纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打

    花了一周的时间完成了 说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术 实现互联网和电信MIS网互通实现网页电话,目前只有 google ...

  3. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  4. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  5. 纯CSS3编写的面包屑导航收集

    整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...

  6. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  7. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  8. 一款纯css3实现的响应式导航

    之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <di ...

  9. 一款纯css3实现的环形导航菜单

    之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览  ...

随机推荐

  1. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  2. fastjson 混淆注意事项

    使用fastjson 注意事项,主要表现: 1.加了符号Annotation 的实体类,一使用就会奔溃 2.当有泛型属性时,一使用就奔溃 在调试的时候不会报错,当你要打包签名混淆包的时候,就会出现上述 ...

  3. 移动端嵌入pdf.js远程请求pdf出现（206）

    最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...

  4. IO流的登录与注册

    import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileR ...

  5. AngularJS 输入验证

    AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...

  6. 2016 DTCC(中国数据库技术大会）

    上周去参加了2016 DTCC(数据库技术大会),会议总共持续3天,议题非常多,我这里搜集了最新的公开的PPT内容,有兴趣的同学可以下载看看,PPT合集下载链接为:http://pan.baidu.c ...

  7. 《饥荒游戏》SW BUG 刷猴子 & 刷淘气值 办法

    简介 该办法利用刷猴子的方式,通过杀猴子获取淘气值,从而刷出坎普斯,继而刷坎普斯背包 物品准备 灭火器x1 箱子x1 逗猴球x1 猴窝xN 帽贝岩x2 避雷针x1 操作步骤 1.灭火器建造在2个帽贝岩 ...

  8. TortoiseGIT的安装过程详解

    TortoiseGIT简介 TortoiseGIT 是Git版本控制系统的一个免费开源客户端,它是git版本控制的 Windows 扩展.可以使你避免使用枯燥而且不方便的命令行.它完全嵌入 Windo ...

  9. 【原创】Chrome最新版（53-55）再次爆出BUG！

    前言 今年十月份,我曾发布一篇文章<Chrome53 最新版惊现无厘头卡死 BUG!>,不过那个BUG在最新的 Chrome 54 中已经修正. 而今天即将发布的Chrome弱智BUG: ...

  10. C++远征之封装篇(下)

    对象数组 类 x1[]; 栈中实例化,不用delete. 类 *X=new X[];//在堆中实例化,结尾需要用delete删除 delete []X; //这是数组的删除形式 X=NULL;