<!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. WebViewJavascriptBridge源码探究--看OC和JS交互过程

    今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...

  2. UITableview delegate dataSource调用探究

    UITableview是大家常用的UIKit组件之一,使用中我们最常遇到的就是对delegate和dataSource这两个委托的使用.我们大多数人可能知道当reloadData这个方法被调用时,de ...

  3. ListView之多种类型Item

    一.概述 一般而言,listview每个item的样式是一样的,但也有很多应用场景下不同位置的item需要不同的样式. 拿微信举例,前者的代表作是消息列表,而后者的典型则是聊天会话界面. 本文重点介绍 ...

  4. Razor速记

    1.语法 @{     int c=2; } @for(int i=0;i<c;i++) {     @i     @:@i     @:select     @:select @i     s ...

  5. Mysql 里面使用row_number() 的用法和注意

    虽然使用不多,但是也有情况是需要在mysql 里面写语句开发功能的.在sql server 使用惯了,习惯了使用row_number() 函数进行排序,但是mysql 确没有这样一个函数.然后找到了p ...

  6. error LNK2001: 无法解析的外部符号

    1.错误描述 error LNK2001: 无法解析的外部符号 "__declspec(dllimport) void __cdecl PadSystem::Private::printQS ...

  7. vi(vim)键盘图及其基本命令

    进入vi vi filename                打开或新建文件,并将光标置于第一行首 vi +n filename           打开文件,并将光标置于第 n行首 vi + fi ...

  8. Collections.shuffle

    1.Collections.shuffler 最近有个需求是生成十万级至百万级的所有随机数,最简单的思路是一个个生成,生成新的时候排重,但是这样时间复杂度是o(n^2),网上看了几个博客的解决方法都不 ...

  9. java 多线程 Synchronized方法和方法块 synchronized(this)和synchronized(object)的理解

    synchronized 关键字,它包括两种用法:synchronized 方法和 synchronized 块. 1. synchronized 方法:通过在方法声明中加入 synchronized ...

  10. 【python之路1】python安装与环境变量配置

    直接搜索 Python,进入官网,找到下载,根据个人电脑操作系统下载相应的软件.小编的是windows os .下载python-2.7.9.msi 安装包  双击安装程序,进入安装步骤.在安装过程中 ...