用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. JavaScript+CSS+DIV实现下拉菜单示例

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

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

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

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

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

  8. CSS打造三级下拉菜单

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

  9. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

随机推荐

  1. VS2013 GIT 克隆远程仓库

    1.配置本地GIT 工具->选项->源代码管理,选择GIT 2.打开团队资源管理器,找到GIT克隆选项 3.单击克隆,在输入框内输入远程仓库地址,然后单击克隆即可 GIT 插件配置:参考  ...

  2. iOS $299申请时碰到的狗血问题

    最近项目需要申请in-house证书,结果在提交审核前一步,遇到问题:Enter your organization information.please enter the Romanized ve ...

  3. pl/sql配置连接远程数据库oracle,本地没有安装oracle数据库的情况下

    首先下载instantclient 可以到oracle官网下载,要注册账号,一定要下对应版本的,要不然不成功, 10G,11G版的,我已经传上来了,免费下载:正在上传中,稍等 配置文件tnsnames ...

  4. caffe中的props

    VS .props解析   在VS 2010项目文件夹中属性表文件的新的格式(.props).Visual Studio 2010引入了用户设置文件(Microsoft.cpp.<Platfor ...

  5. 【BZOJ 2818】gcd 欧拉筛

    枚举小于n的质数,然后再枚举小于n/这个质数的Φ的和,乘2再加1即可.乘2是因为xy互换是另一组解,加1是x==y==1时的一组解.至于求和我们只需处理前缀和就可以啦,注意Φ(1)的值不能包含在前缀和 ...

  6. linux 2&gt;&amp;1

    2>&1就是用来将标准错误2重定向到标准输出1中的.此处1前面的&就是为了让bash将1解释成标准输出而不是文件1.至于最后一个&,则是让bash在后台执行 例如:/us ...

  7. java编解码技术,json序列化与二进制序列化

    1.何为json序列化与二进制序列化 通常我们在程序中采用的以json为传输,将json转为对象的就是json序列化了.而二进制序列化通常是我们将数据转换为二进制进行传输,然后在进行各类转换操作 2. ...

  8. SoapUI入门

    注:需要使用发布的webService接口 我们一般用的是impl接口调用,不大用得上soapUI.看到一份简历上写了使用soapUI做webService测试,想了解一下什么是soapUI soap ...

  9. java邮件小实例

    新建一个包,名为mail 第一个类:MailSenderInfo.java  ########################################### package com.util. ...

  10. debian 该分区的部分安装移动硬盘后无法识别。

    有一个新的团购1T移动硬盘.购买格化学式ntfs经过几次简单的子区域. 4G硬盘PE.100G高速互动,盈800许多G分为两个相等的存储盘. 到您的计算机USB接口后,, 桌面弹出自己主动4一封信. ...