用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. Linux From Scratch - Version 7.7-systemd (中文)

    Linux From Scratch - Version 7.7-systemd: https://linux.cn/lfs/LFS-BOOK-7.7-systemd/index.html

  2. 使用&quot;关键词&quot;来整理自己的知识库

    以前一直使用MyBase作为整理知识的工具,但是用到后来发现,当整理的知识越来越多时,树形目录的节点个数就会变得越来越庞大,层次越来越深,反而很难定位要查看或编辑的知识.最近发现使用"关键字 ...

  3. sqlite实现oracle的rownum功能

    SELECT (SELECT COUNT(*) FROM [table] AS t2 WHERE t2.name <= t1.name) AS rowNum, id, name FROM [ta ...

  4. SQL Server 查看物理页存储

    创建测试表 Use Test create table dbo.employee( emp_lname varchar(12) not null, emp_fname varchar(12)not n ...

  5. C语言数据类型

    1.概述 C 语言包含的数据类型如下图所示: 2.各种数据类型介绍 2.1整型 整形包括短整型.整形和长整形. 2.1.1短整形 short a=1; 2.1.2整形 一般占4个字节(32位),最高位 ...

  6. 清理SQL数据库日志

    Use DBSelect NAME,size From sys.database_files ALTER DATABASE DB SET RECOVERY SIMPLE WITH NO_WAIT AL ...

  7. codeforces #261 C题 Pashmak and Buses(瞎搞)

    题目地址:http://codeforces.com/contest/459/problem/C C. Pashmak and Buses time limit per test 1 second m ...

  8. WPF 使用WinForm Chart控件

    第一步:  页面 首先引用命名空间 xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFor ...

  9. 将项目打成jar包执行 在liunx上执行 java -xx.jar

    一:普通maven java项目 项目目录 pom.xml <?xml version="1.0" encoding="UTF-8"?> <p ...

  10. .net 关于匿名类型的特性

    匿名类型 1: var n1 = new { name = "name1", age = 40 }; 2: var n2 = new { name = "name2&qu ...