<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>蓝色下拉滑动二级导航菜单</title>

<style  type="text/css">

body{

    margin:0;   /*元素边距*/

    font-family:'微软雅黑','Times New Roman', Times, serif;

    }           /*字体样式*/

.navi_body{

    overflow:hidden; /*隐藏内联块*/

    height:50px;

    background:cadetblue;

    transition:height ease 0.5s; /*导航栏内容弹出-转变高度延长时间0.5S*/

}

.navi_head{

    height:50px;

    background:#459df5;/*导航栏背景颜色*/

}

.navi_body:hover{

    height:300px; /*鼠标移动到导航主体后 高度300px*/

}

.navi_head>div>span{

    width:150px; /*标签宽度*/

    text-align:center; /*标签的对齐方式为居中*/

    height:300px;

    display:inline-block;/*显示为内联块*/

    font-weight:bold;/*字体宽度 粗体*/

    color:#FFF;

    font-size:14px;

    vertical-align:top; /*垂直对齐顶部*/

}

.navi_head>div>span>p a{

    color:#FFF;

    text-decoration:none;     /*文本装饰 无下划线*/

}

.navi_head>div>span>p a:hover{

    color:#FFF;

    text-decoration:underline;/*文本装饰 下划线*/

}

.navi_title{

    font-size:16px;

    line-height:50px;

    margin-top:0;

}

.navi_head>div>span:hover{

    background:rgba(100,100,100,0.5);

}

</style>

</head>

<body>

    <div>

        <div class="navi_body">

            <div class="navi_head">

                <div style="width:80%; margin-left:auto; margin-right:auto;">

                    <span>

                        <p class="navi_title">首页</p>

                    </span>

                    <span>

                        <p class="navi_title">关于我们</p>

                        <p><a href="">团队介绍</a></p>

                        <p><a href="">服务QQ群</a></p>

                        <p><a href="">个人业务</a></p>

                    </span>

                    <span>

                        <p class="navi_title">软件下载</p>

                        <p><a href="">WEB编译工具</a></p>

                        <p><a href="">桌面整理工具</a></p>

                    </span>

                    <span>

                        <p class="navi_title">招贤纳士</p>

                        <p><a href="">WEB前端工程师</a></p>

                        <p><a href="">JAVAWEB工程师</a></p>

                        <p><a href="">APP开发工程师</a></p>

                        <p><a href="">数据库工程师</a></p>

                        <p><a href="">软件架构师</a></p>

                        <p><a href="">技术客服</a></p>

                    </span>

                    <span>

                        <p class="navi_title">给我留言</p>

                        <p><a href="">站内留言</a></p>

                        <p><a href="">站长信箱</a></p>

                    </span>

                </div>

            </div>

        </div>

    </div>

</div>

</body>

</html>

[CSS3] 二级下拉导航的更多相关文章

  1. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  2. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  3. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  4. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  5. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  6. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  7. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  8. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  9. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

随机推荐

  1. css常用属性总结：文本属性中的text-indent

    在网页中的文本格式中最重要的效果之一就是段落的首行文本缩进,尤其在新闻类页面,使用text-indent,任何元素都可以让首行以给定的长度缩进, 长度甚至可以是负数,这一属性的最常用方式就是段落的首行 ...

  2. linux 同步IO: sync、fsync与fdatasync

    [linux 同步IO: sync.fsync与fdatasync] 传统的UNIX实现在内核中设有缓冲区高速缓存或页面高速缓存,大多数磁盘I/O都通过缓冲进行.当将数据写入文件时,内核通常先将该数据 ...

  3. MyEclipse10.0 采用插件方式安装 SVN(转)

    原文:http://blog.sina.com.cn/s/blog_a5f093b401015uzl.html 一.到官方上下载svn1.8.3,下载后的文件名叫site-1.8.3.zip 地址:h ...

  4. 查看http的并发请求数及其TCP连接状态

    统计80端口的连接数据 netstat -nat | grep -i "80" | wc -l 统计httpd协议连接数 ps -ef | grep httpd | wc -l 统 ...

  5. 关于网页头图标ico的问题

    今天同事问了我一个比较奇怪的问题,对于我来说,可能和编码没什么关系,但是确实是头一次注意到,所以把问题记录了下来,方便以后积累经验. 问题就是: 在本地的网页中设置了头图标 <link rel= ...

  6. iconv-go升级过程中的编译问题

    工作项目原因,需要对golang进行升级.升级之后老的iconv-go运行有问题.因为新的golang运行更加严格,所以需要升级iconv-go. 从djimenez/iconv-go 拉下来代码进行 ...

  7. MySqlDBHelper

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  8. Ckeditor 中粘贴图片

    我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances[&quo ...

  9. SOCKET句柄泄露带来的内存灾难

    前些时候游戏莫名其妙出现大量内存泄露,我感到很诧异,当然一般情况下游戏的内存管理是极其严苛的,出现如此大量的内存泄露到底是怎么回事? 句柄滥用导致的内存泄露会多夸张呢,尤其SOCKET,在某些客户端系 ...

  10. 【转】java遍历实体类的属性和数据类型以及属性值

    和同学接了个外包的活,由于项目中很多地方要用到poi导出excel,而每次导出都要写很多相同的代码,因为poi的cell.setCellValue();每次设置的都是不同实体bean的属性值,导致代码 ...