一个用纯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 ...
随机推荐
- android Fragments介绍
Fragments是Android3.0引入的概念,译为片段.碎片,为了解决不同屏幕分辩率的动态和灵活UI设计. Fragment表现Activity中UI的一个行为或者一部分.可以将多个fragme ...
- IOS 杂笔－11（实现在外部无法改变UIView的size）
我想题目说的或许不是很清楚,那么现在我详细介绍一下这篇随笔内容. 在外部无法改变UIVIew控件的size. 这里说是UIView,但是事实上,是大多数控件而绝非仅UIView. 想要实现在外部无法改 ...
- c#批量插入数据库Demo
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...
- Spring类型转换 ConversionSerivce Convertor
以String转Date为例: 定义转换器: import java.text.ParseException; import java.util.Date; import org.apach ...
- Ubuntu 14 Trusty安装hue
想开始学习一下hive,需要一个使用起来方便的客户端,网上搜了一下发现hue是个很常用的工具.于是,就在自己的ubuntu14系统里,尝试安装hue.下面就是自己的安装步骤,记录如下: 1.先查看自己 ...
- 昨天写支付接口时遇到支付接口返回数据接收地址，session数据丢失（或者说失效）的问题
在网上找了好久 才找到答案 分享给大家 http://www.zcool.com.cn/article/ZMzYwNTI=.html
- 威佐夫博弈(Wythoff Game)
有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后把石子全部取完者为胜者. ...
- ngx_http_upstream_module模块.md
ngx_http_upstream_module ngx_http_upstream_module模块用于定义可由proxy_pass,fastcgi_pass,uwsgi_pass,scgi_pas ...
- CODE[VS]1372DNA
Description 为了进一步分析外星生物,专家们决定对 DNA 进行切割.限制性核酸内切酶是基因工程中的重要的工具酶.它会识别一段碱基序列(说白了就是只包含 ATGC 的序列)并且切割开.Eco ...
- [LeetCode] Self Crossing 自交
You are given an array x of n positive numbers. You start at point (0,0) and moves x[0] metres to th ...