<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. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  2. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  3. 38 个免费开源的 CSS 下拉导航菜单

    http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus

  4. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  5. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  6. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  7. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  8. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

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

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

随机推荐

  1. cf D. Levko and Array

    http://codeforces.com/contest/361/problem/D 用二分搜索相邻两个数的差的绝对值,然后用dp记录数改变的次数.dp[i]表示在i之前改变的次数,如果|a[i]- ...

  2. Codeforces 527D Clique Problem

    http://codeforces.com/problemset/problem/527/D 题意:给出一些点的xi和wi,当|xi−xj|≥wi+wj的时候,两点间存在一条边,找出一个最大的集合,集 ...

  3. NOR flash和NAND flash区别,RAM 和ROM区别

    ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...

  4. QQ截图时窗口自动识别的原理（WindowFromPoint, ChildWindowFromPoint, ChildWindowFromPointEx,RealChildWindowFromPoint）

    新版的QQ在截图时加入了窗口自动识别的功能,能根据鼠标的位置自动画出下面窗口的轮廓.今天有人在论坛上问起这个问题,下面我们来探讨这个功能的实现原理. 首先我们要明白截图软件的基本原理,截图时实际上是新 ...

  5. Android应用程序插件化研究之AssertManager

    最近在研究Android应用的插件化开发,看了好几个相关的开源项目.插件化都是在解决以下几个问题: 如何把插件apk中的代码和资源加载到当前虚拟机. 如何把插件apk中的四大组件注册到进程中. 如何防 ...

  6. 瑞柏匡丞谈中国移动app的国际进阶路

    当今3.0互联时代,已然形成了一个移动化,互动化,全球化的完整体系.瑞柏匡丞也在常年与国内外客户的交流沟通中有了自己的些许见解. 国内的移动产业的发展已然非常迅速,但也正是因为各类企业的不断崛起,能够 ...

  7. poj1185：炮兵阵地（状压dp）

    也算是比较基础的状压dp了,跟做过的第二道比较又稍微复杂了一点 需要记录之前两行的状态.. 统计结果也稍有不同 另外还学习了一个得到一个整数二进制位 1 的个数的位运算方法 详见代码: #includ ...

  8. poj3358：欧拉定理

    又是一道用欧拉定理解的题..嗯,关键还是要建好方程,注意一些化简技巧 题目大意: 给定一个由 p / q 生成的循环小数,求此循环小数在二进制表示下的最小循环节以及不是循环节的前缀 思路: 小数化为二 ...

  9. for的用法

    第一次看到这么用,哈哈,就记下 for (var control = ["程", "陈", "是"]; control[0]; contro ...

  10. (转载)XML Tutorial for iOS: How To Read and Write XML Documents with GDataXML

    In my recent post on How To Choose the Best XML Parser for Your iPhone Project, Saliom from the comm ...