简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#nav {
width: 500px;
background-color: #737373;
height: 40px;
/*border-radius: 10px;*/
position: relative;
margin: 0px auto;
top: 0px;
}
.nav-container {
width: 100%;
height: 40px;
position: absolute;
}
.banner {
float: left;
text-align: center;
height: 40px;
width: 20%;
line-height: 40px;
}
.banner:hover {
background-color: #00BFFF;
cursor: pointer;
}
div ul {
list-style: none;
/*display: none;*/
background-color: blue;
overflow: hidden;
/*模拟height:auto时候的情况*/
max-height: 0px;
transition: max-height 0.3s;
/*多浏览器支持*/
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
.banner:hover ul {
/*display: block;*/
width: 100%;
max-height: 160px;
}
div ul li {
overflow: hidden;
}
div ul li:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="nav-container">
<div id="nav">
<div id="nav-button-1" class="banner">第1个导航
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="nav-button-2" class="banner">第2个导航
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav-button-3" class="banner">第3个导航
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div id="nav-button-4" class="banner">第4个导航
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="nav-button-5" class="banner">第5个导航
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
预览效果
简单的CSS 下拉导航菜单实现代码的更多相关文章
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- MDNavBarView下拉导航菜单（仿美团导航下拉菜单）
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
随机推荐
- CSS中cursor的pointer 与 hand-备
cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标(在浏览器上时 鼠标会显示成 小手 ).但用FireFox浏览时才注意到使用cursor:hand在FireFo ...
- Lintcode--002（两个字符串是变位词）
写出一个函数 anagram(s, t) 判断两个字符串是否可以通过改变字母的顺序变成一样的字符串. 您在真实的面试中是否遇到过这个题? 样例 给出 s = "abcd", ...
- 一步步教你如何源码编译Recovery
*1 准备Ubuntu作为您的操作系统,笔者的版本是12.04_amd64. *2 准备 Android 源码的编译环境,主要是安装一些编译用到的lib库,以及同步源码的一些工具 ,如GIT,CURL ...
- hdu Free DIY Tour
http://acm.hdu.edu.cn/showproblem.php?pid=1224 #include <cstdio> #include <cstring> #inc ...
- 管理Undo数据
SQL> select sum(bytes),status from dba_undo_extents group by status; SUM(BYTES) STATUS ---------- ...
- LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别
LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和作用分别如下: LIBRARY_PATH环境变量用于在程序编译期间查找动态链接库时指定查找共享库的路径 ...
- JS控制菜单样式切换
$('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...
- hdu 5392 Infoplane in Tina Town（数学）
Problem Description There is a big stone with smooth surface in Tina Town. When people go towards it ...
- iOS 提示音播放
首先找到对应的素材 音频文件 写一个类继承 NSObject 命名为AudioUtil 导入支撑文件 #import <AVFoundation/AVFoundation.h> #impo ...
- 记录一些Linux C的常用库函数
我已经受不了每次用的时候去百度了,还百度不出来..... [数字字符串转换篇] atof - convert a string to a double #include <stdlib.h> ...