<!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. css属性兼容主流浏览器

    目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...

  2. 初识Android Studio

    刚开始接触Android Studio,很多不适应的地方,自己慢慢摸索,记录下了一些问题和解决途径. 为了能使用android虚拟机,需要下载镜像,镜像有基于arm架构的也有基于intelx86.x6 ...

  3. java实现单链表的整表创建

    package com.java.dataStruct; public class Node<E> { E item; Node next; public Node(){ } public ...

  4. Introduction to graph theory 图论/脑网络基础

    Source: Connected Brain Figure above: Bullmore E, Sporns O. Complex brain networks: graph theoretica ...

  5. [LeetCode] Decode String 解码字符串

    Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], where ...

  6. [LeetCode] Bulls and Cows 公母牛游戏

    You are playing the following Bulls and Cows game with your friend: You write a 4-digit secret numbe ...

  7. 自动判断应该Ajax还是return

    起因 最近回顾以前的代码,发现一个偶尔会见到的现象.一个类里面的方法可能需要Ajax返回,也有可能需要函数return.这个现象发生在网站MVC中的 逻辑层(或模型层),示例如下.IndexCtrl是 ...

  8. Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  9. 【WPF】GridLengthAnimation

    参考 : http://zhidao.baidu.com public class GridLengthAnimation : AnimationTimeline { public static re ...

  10. Android---观察者模式的简单实现demo

    ObserverListerner: subjectListener: 观察者管理类: 使用方法: 1. 接口: 2. 注册观察者: 3. 通知:(触发事件执行): 4. 实现方法:(都要写, 只在要 ...