<!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. 简单的学习心得：网易云课堂Android开发第五章SharedPreferences与文件管理

    一.SharedPreferences (1)SharedPreferences能够用来保存一些属于基本数据类型的数据. (2)保存数据,删除数据都是由SharedPreferences的内部接口Ed ...

  2. 手游录屏直播技术详解 | 直播 SDK 性能优化实践

    在上期<直播推流端弱网优化策略 >中,我们介绍了直播推流端是如何优化的.本期,将介绍手游直播中录屏的实现方式. 直播经过一年左右的快速发展,衍生出越来越丰富的业务形式,也覆盖越来越广的应用 ...

  3. 改变Activity启动时的默认动画

    why 在开发中我们可能需要改变这一行为,一般基于2种理由: 产品的spec这么要求的: 想自己控制这个行为,因为在Android设备上可能每个的这一默认行为都不一样,厂商可以很容易修改它,从而导致a ...

  4. Spring Bean的加载

    Spring加载bean的原则:不等bean创建完成就会将创建bean的ObjectFactory提早曝光加入到缓存中.   单例bean在Spring容器里只会创建一次,后续创建时会首先从缓存中获取 ...

  5. Java多线程中的死锁问题

    Java程序基本都要涉及到多线程,而在多线程环境中不可避免的要遇到线程死锁的问题.Java不像数据库那么能够检测到死锁,然后进行处理,Java中的死锁问题,只能通过程序员自己写代码时避免引入死锁的可能 ...

  6. 简单配置 nginx 反向代理

    # Nginx 域名反向代理配置# 安装nginx yum install nginx -y# 修改配置文件 进入配置文件目录 cd /etc/nginx/conf.d 新建配置文件以.conf结尾 ...

  7. Windows 10 虚拟桌面切换

    从Windows 10开始,终于有了和Mac一样的虚拟桌面了.但总感觉用着非常的别扭.在Mac中,切换虚拟桌面的操作可谓方便至极:除了触控板和Magic Mouse原生的支持外,通过罗技M557/55 ...

  8. SCNU ACM 2016新生赛初赛 解题报告

    新生初赛题目.解题思路.参考代码一览 1001. 无聊的日常 Problem Description 两位小朋友小A和小B无聊时玩了个游戏,在限定时间内说出一排数字,那边说出的数大就赢,你的工作是帮他 ...

  9. Programming Contest Problem Types

        Programming Contest Problem Types Hal Burch conducted an analysis over spring break of 1999 and ...

  10. jenkins / ant / jmeter 持续集成接口自动化

    1. 将 jmeter 脚本放在/var/lib/jenkins/workspace/Jmeter_auto/jmxpath路径下 2. 点击http://jk.facebank.net.cn/job ...