一个用纯CSS实现的下拉菜单
用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实现的下拉菜单的更多相关文章
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- CSS 实现样式下拉菜单
下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
- 【Android初级】如何实现一个有动画效果的自定义下拉菜单
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- JavaScript+CSS+DIV实现下拉菜单示例
<!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 纯css实现select下拉框并排显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
随机推荐
- 在C语言中利用PCRE实现正则表达式
1. PCRE简介 2. 正则表达式定义 3. PCRE正则表达式的定义 4. PCRE的函数简介 5. 使用PCRE在C语言中实现正则表达式的解析 6. PCRE函数在C语言中的使用小例子 1. P ...
- 3D坦克大战游戏源码
3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...
- pscp工具上传或取回文件、文件夹
1.把服务器上的/root/dir目录取回本地"C:\My Documents\data\"目录 C:\>pscp.exe -r root@IP:/root/dir &quo ...
- IDEA 中scala 程序运行时的错误：报错 test is already defined as object test
解决办法:在 创建main文件夹和scala文件夹的时候,注意src与这两个文件夹不能同时设置为resources,否则就会产生报错,解决办法将src文件夹的resources取消,右键.
- 为什么现在我最终推荐内存OLTP
在今年的8月份,我写了篇文章,介绍了我还不推荐用户使用内存OLTP的各个理由.近日很多人告诉我,他们有一些性能的问题,并考虑使用内存OLTP来解决它们. 众所皆知,在SQL Server里内存OLTP ...
- uboot的配置流程分析
简单介绍一下uboot的基本配置流程.和绝大多数源码编译安装一样,uboot在执行make之前需要执行make XXXconfig来配置相关信息,而且uboot本身是针对多种平台的bootloader ...
- mysql主备（centos6.4）
服务器基本环境: 两台centos6.4.iptables diabled .selinux disabled 两台的hosts解析 #yum install mysql -y //这个一定要装 ...
- x01.BSheepTree: 树
数据结构,无外乎三: 1. 一对一,线性表,数组是也: 2. 一对多,树,菜单是也: 3. 多对多,图,网络是也. 涉及到树,有一个平衡的问题,左旋转,右旋转,转得人晕晕乎乎.好在陈广的<数据结 ...
- Linux paste命令
Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法 paste [-s][-d <间隔字符>][--help][--versi ...
- String构造器中originalValue.length>size 发生的情况
最近在看Jdk6中String的源码的时候发现String的有个这样的构造方法,源代码内容如下: public String(String original) { int size = origina ...