用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实现的下拉菜单的更多相关文章

  1. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  2. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  3. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  4. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  5. 【Android初级】如何实现一个有动画效果的自定义下拉菜单

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  6. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  7. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  8. 纯css实现select下拉框并排显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

随机推荐

  1. Android 防止多次点击事件

    恐怕大家都会遇到这样的问题,一个点击事件多次触发,导致,同样的内容提交了多次,或者说弹出多个页面... 下面是简单的方案,大家可以试一试 原理很简单,当我们第一次点击的时候,把按钮变成不可点击状态. ...

  2. mysql操作入门基础之对数据库和表的增删改查

    一.数据库管理-- 1.登陆数据库 mysql -u root -p; -- 2.查看数据库服务器所有数据库 SHOW DATABASES; -- 3.创建数据库 CREATE DATABASE My ...

  3. iOS系列 基础篇 04 探究视图生命周期

    iOS系列 基础篇 04 探究视图生命周期 视图是应用的一个重要的组成部份,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 以视图的四种状态为基础,我们来系统了解一下视 ...

  4. Hibernate 系列 01 - 框架技术 （介绍Hibernate框架的发展由来）

    引导目录: Hibernate 系列教程 目录 本篇导航: 为什么学习框架技术 框架的概念 主流框架的介绍 1.为什么学习框架技术 如何制作一份看上去具有专业水准的PPT文档呢?一个简单的方法就是使用 ...

  5. oracle 自增长序列

    create or replace TRIGGER "METTINGUSER".TRG_PREPN BEFORE INSERT ON "PREPROJFUN" ...

  6. 【记录】Ubuntu下安装VirtualBox

    之前换了新硬盘,重装了ubuntu,由于学习需要还是要装个虚拟机.以前用过VMWare真的是神卡,这次换VirtualBox,希望开源社区能给我带来曙光:) 添加VirtualBox的源并安装5.1版 ...

  7. CANopen学习——同步

    在发送和接收之间必须相互协调和同步,为此,CANopen引入同步的概念. 同步报文:包含一个数据字节或者不含数据字节的CAN报文.数据字节中包含一个从1开始递增计数的同步计数器.溢出值可在参数(索引1 ...

  8. hibernate关联映射

    首先,建立user表,news表 建立User,News类 package com.example.hibernate; import java.util.Set; public class User ...

  9. 对比Haproxy和Nginx负载均衡效果

    为了对比Hproxy和Nginx负载均衡的效果,分别在测试机上(以下实验都是在单机上测试的,即负载机器和后端机器都在一台机器上)做了这两个负载均衡环境,并各自抓包分析.下面说下这两种负载均衡环境下抓包 ...

  10. json文件

    json为什么会火 参考链接 http://www.jb51.net/article/32830.htm