网页导航栏的下拉效果，通过div框的显示和隐藏实现。

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                padding: 0px;

                margin: 0px;

            }

            .nav{

                width: 600px;

                height: 35px;

                border: 1px solid black;

            }

            .nav-title{

                width: 100px;
                /*导航栏显示高度*/

                max-height: 35px;

                text-align: center;

                line-height: 35px;

                float: left;

                background-color: greenyellow;

                font-size: 20px;

                /*超出部分隐藏*/

                overflow: hidden;

                transition: 1s;

            }

            /*鼠标指示效果*/

            .nav-title:hover{

                cursor: pointer;
              /*显示下拉高度*/

                max-height: 500px;

            }

            .nav-title ul{

                list-style: none;

            }

            .nav-title li{

                width: 100px;

                height: 35px;

                background-color: burlywood;

            }

            .nav-title li{

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <div class="nav">

            <div class="nav-title">1

                <ul>

                <li>i</li>

                <li>a</li>

                <li>s</li>

                <li>f</li>

            </ul>

            </div>

            <div class="nav-title">2</div>

            <div class="nav-title">3</div>

            <div class="nav-title">4</div>

            <div class="nav-title">5</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出现,推荐配合绝对定位使用

随机推荐

  1. JAVA正则表达式matcher.find()和 matcher.matches()的区别

    1.find()方法是部分匹配,是查找输入串中与模式匹配的子串,如果该匹配的串有组还可以使用group()函数.matches()是全部匹配,是将整个输入串与模式匹配,如果要验证一个输入的数据是否为数 ...

  2. HTML学习笔记之HTML5新特性

    目录 1.拖放 2.画布 3.可伸缩矢量图形 4.地理定位 5.Web 存储 6.应用缓存 7.Web Worker 1.拖放 拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 ...

  3. linux学习9-进程管理知识

    Linux 进程管理 实验环境: 用户名:shiyanlou 密码:AJW3tui5 Linux进程之管理控制 实验介绍 通过本实验我们将掌握一些 Linux 所提供的工具来进行进程的查看与控制,掌握 ...

  4. Lucas小记

    组合数学全忘了 记笔记记笔记 做个简单题 代码 from bzoj4403 #include <stdio.h> #define p 1000003 typedef long long l ...

  5. Tensorflow MNIST浅层神经网络的解释和答复

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51416540 看到之前的一篇博文:深入 ...

  6. elasticsearch match和match_phrase匹配原则(十)

    分词测试 分词后倒排索引结果:可以通过http://127.0.0.1:9200/_analyze 测试 { "analyzer":"ik_max_word", ...

  7. mongodb之存储引擎

    前言 存储引擎是Mongodb管理数据存储主要的组件,Mongodb支持多种存储引擎,每种存储引擎适合特定的场景 WiredTiger 特性 1. version >= 3.2版本默认存储引擎2 ...

  8. Bran的内核开发指南_中文版

    http://www.cnblogs.com/liloke/archive/2011/12/21/2296004.html 最近在看<orange’s>一书,有点想自己写一个轻量级OS的想 ...

  9. data object audit

    客户提出了一个需求.想对一个表做audit. 本来这是非常简单的一个case,因为oracle自带的 audit功能就可以非常方便的实现.  实现的方式如下: BEGIN DBMS_FGA.ADD_P ...

  10. cocos2d-x andriod, Box2D.h: No such file or directory

    原文链接:r=47980">http://www.cocos2d-x.org/forums/6/topics/47503? r=47980 You need to include li ...