纯CSS3实现动态导航栏目

<!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实现动态导航栏目的更多相关文章

纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打
花了一周的时间完成了说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术实现互联网和电信MIS网互通实现网页电话,目前只有 google ...
纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
纯CSS3编写的面包屑导航收集
整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航查看网站扁平化面包屑导航查看网站圆形风格面包屑导 ...
纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="x_con ...
一款简洁的纯css3代码实现的动画导航
之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...
一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览源码下载实现的代码. html代码: <di ...
一款纯css3实现的环形导航菜单
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览 ...

随机推荐

带调试器(Debugger)的ILSpy(2.2.0.1738)
2015-03-13 09:40更新: 感谢@dark89757园友提出的调试时不能查看变量的问题. 源码已修改,并提交到了github. 请查看最新发布,二进制文件和源码都在这里: 调试时可查看变量 ...
C# 模板列在绑定的时候取文本值
查了很多资料,都说模板列无法取文本值, 需要使用FindControl, 对于列数很多的情况就要命了, 使用以下方式, 可以循环列的索引,获取到文本值前台 <asp:TemplateField ...
CSS3：RGBA的使用方法
1.说明此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...
MYSQL数据库的优化
我们究竟应该如何对MySQL数据库进行优化?下面我就从MySQL对硬件的选择.MySQL的安装.my.cnf的优化.MySQL如何进行架构设计及数据切分等方面来说明这个问题. 服务器物理硬件的优化在 ...
Linux基础练习题(三)
1.显示当前系统上root.fedora或user1用户的默认shell: [root@www ~]# egrep "^(root|fedora|user1)" /etc/pass ...
python（一）
python数学函数 abs(x) 返回数字的绝对值,如abs(-10) 返回 10 ceil(x) 返回数字的上入整数,如math.ceil(4.1) 返回 5 cmp(x, y) 如果 x < ...
ASP.NET中将导出的数据以UTF-8编码方式进行存储
Response.Charset = "UTF-8"; Response.ContentEncoding = Encoding.UTF8; Response.AppendHea ...
spring squertz定时任务
spring squertz是一个强大的定时任务处理方式 1.需要的Jar quartz-1.8.5.jar commons-logging.jar spring-core-3.0.5.RELEASE ...
Linux下安装jdk1.7、Apache-tomcat7
首先说明下我的主机环境:主机:32位win7 虚拟机:VMware Workstation10.0.1 linux:红帽子centos6.4 jdk1.7 Apache-tomcat7 java环境需 ...
用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

纯CSS3实现动态导航栏目

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

随机推荐

热门专题