<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<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下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  2. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  4. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  5. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  6. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  7. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

  8. [CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  9. [HTML/CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  10. css下拉菜单写法

    网页导航栏的下拉效果,通过div框的显示和隐藏实现. <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

    一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为 ...

  2. NodeMCU之旅（三）：响应配置按钮

    引言 在之前的代码中,要连接的WIFI信息都已写死在代码里,这显然不能适应我们的需求.所以需要想个办法让用户可以配置这些信息. WIFI工作模式 NodeMCU支持STATION,SOFTAP,STA ...

  3. HDU-5086-Revenge of Segment Tree

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5086 这题太不应该了,比赛时没做出来,本来呢,以现在的水平这题是能够做出来的,可就是题目理解错了,按题 ...

  4. netcat工具的使用

    用途:网络管理工具. 可以读,写TCP或UDP 网络连接.简写为:nc 常见参数: -h  帮助信息 -l 坚挺模式 -n 指定IP地址 -p 指定端口号 -v 详细输出 1 客户端:很容易建立一个客 ...

  5. Java中多线程原理详解

    Java是少数的集中支持多线程的语言之一,大多数的语言智能运行单独的一个程序块,无法同时运行不同的多个程序块,Java的多线程机制弥补了这个缺憾,它可以让不同的程序块一起运行,这样可以让程序运行更加顺 ...

  6. Clojure发音

    Clojure的发音和单词closure是一样的.Clojure之父是这样解释Clojure名字来历的 “我想把这就几个元素包含在里面: C (C#), L (Lisp) and J (Java). ...

  7. 求求别再这么用log4x了

    sl4j或者log4j中,推荐的记录方式是: private Logger log = Logger.getLogger(getClass()); //或者 private static final ...

  8. 微信小程序教程（第三篇）

    小程序的架构及实现机制,信道服务及会话管理 小程序架构及实现机制 小程序并不是 H5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件).所以建议在开发小程序时不要以 ...

  9. Iterator——迭代接口

    迭代对于JAVA的来说绝对不陌生.我们常常使用JDK提供的迭代接口进行Java集合的迭代. Iterator iterator = list.iterator(); while(iterator.ha ...

  10. 在javascript中关于变量与函数的提升

    在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...