一个用纯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 ...
随机推荐
- Swift3 - String 字符串、Array 数组、Dictionary 字典的使用
Swift相关知识,本随笔为 字符串.数组.字典的简单使用,有理解.使用错误的地方望能指正. ///************************************************** ...
- WinSetupFromUSB - 制作多系统U盘安装All-In-One的利器
单U盘玩多个操作系统,这下有福了! 官网最新的下载地址:http://www.winsetupfromusb.com/files/download-info/winsetupfromusb-1-7-e ...
- 关于在安装MySQL时报错"本地计算机上的mysql服务启动后停止,某些服务在未由其他服务或程序使用时将自动停止"的解决方法
首先将你下载的MySQL安装或者解压(对应安装版和解压版),下载地址http://dev.mysql.com/downloads/mysql/ 然后复制你安装目录中的my-default.ini,更改 ...
- MySQL Performance-Schema(二) 理论篇
MySQL Performance-Schema中总共包含52个表,主要分为几类:Setup表,Instance表,Wait Event表,Stage Event表Statement Event表,C ...
- SQL Server 2008 R2：快速清除日志文件的方法
本例,快速清理“students”数据库的日志,清理后日志文件不足1M. USE [master] GO ALTER DATABASE students SET RECOVERY SIMPLE WIT ...
- TNS-12535: TNS:operation timed out案例解析
一数据库突然连接不上,在自己电脑上使用SQL Developer也连接不上.立即使用SecureCRT连接上了这台服务器,从下面几个方面检查. 1:检查了数据库的状态是否正常 $ sqlplus / ...
- Practical oral English
1.如果你继续发烧,我就去请医生过来If your fever continues, I'll send for the doctor.2.在这么大的停车场里,我是永远都找不到我的车的I'll nev ...
- Spring 01基础
一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...
- Ajax中POST和GET的区别
Get和Post都是向服务器发送的一种请求,只是发送机制不同. 1. GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器.当然在Ajax请求中,这种 ...
- list<T> 的使用方法。
首先讲一个经常用到的Contains( )方法,用来测试一个元素是否在List内.这个功能跟SQL里面的" like % %"类似. 这个方法在数组中也存在,因为集合其实就是动态数 ...