[CSS3] 二级下拉导航
<!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] 二级下拉导航的更多相关文章
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
随机推荐
- LevelDB 整体架构
[LevelDB 整体架构] 从图中可以看出,构成LevelDb静态结构的包括六个主要部分:内存中的MemTable和Immutable MemTable以及磁盘上的几种主要文件:Curren ...
- Python之Scrapy遇见个坑
运行Scrapy爬虫被限制抓取,报错: -- :: [scrapy.middleware] INFO: Enabled item pipelines: [] -- :: [scrapy.core.en ...
- PHP开启页面报错的代码
PHP开启页面报错的方法很简单,在<?php内加入下面的代码就可以了: <?php ini_set("display_errors", "On"); ...
- ubuntu 出来菜单栏和任务栏
http://blog.csdn.net/terence1212/article/details/51340595 命令行输入:sudo apt-get install compizconfig-se ...
- Chrome 扩展 Vue Devtools
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...
- Zookeeper 源码(三)Zookeeper 客户端源码
Zookeeper 源码(三)Zookeeper 客户端源码 Zookeeper 客户端主要有以下几个重要的组件.客户端会话创建可以分为三个阶段:一是初始化阶段.二是会话创建阶段.三是响应处理阶段. ...
- CMAKE 教程前两章节学习
原文 https://cmake.org/cmake-tutorial/ 以下是一个循序渐进的教程,它覆盖了CMAKE帮助改进的通常的构建系统的话题.许多话题在<掌握CMAKE>(< ...
- 类数组对象 实参对象arguments
先看实参对象arguments 之前对argument有点印象,知道它不是真正的数组,但也可以arguments[0]和arguments.length.今天详细的记录一下. js的默认行为:省略的实 ...
- R12.1.3 patch9239090
参考文档:Oracle E-Business Suite Release 12.1.3 Readme [ID 1080973.1]1.调整参数_disable_fast_validate=TRUEpg ...
- [编译,报错以及其他] 有关C/C++中int不能用-2147483648当最小值的问题
这个取决于今早看耗子叔的微博: 这里说到了int的取值范围的问题,int的取值是-2147483648 ~ 2147483647,但是如果直接在编译器(VS2013)中使用-2147483648会报错 ...