网页导航栏的下拉效果，通过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. PHP面试：说下什么是堆和堆排序？

    堆是什么? 堆是基于树抽象数据类型的一种特殊的数据结构,用于许多算法和数据结构中.一个常见的例子就是优先队列,还有排序算法之一的堆排序.这篇文章我们将讨论堆的属性.不同类型的堆以及堆的常见操作.另外我 ...

  2. C#学习笔记_11_方法的隐藏和重写

    11_方法的隐藏和重写 方法的隐藏 需要使用到关键字:new 方法的重写 虚函数: 使用关键字virtual修饰的函数 虚函数可以被子类隐藏,也可以被子类重写 非虚函数只能被子类隐藏 关键字:over ...

  3. ReportNG 替换testng获得测试报告

    1.导入reportng相关jar包

  4. C++ 数据结构模板 队列 栈 动态链表 模板 Queue Stack List

    C++数据结构模板,可以实现基本功能,用法和stl差不多,比如Q.pop();Q.push(a);Q.front();...... (由于动态链表用的不多,若有错误望各位大神不吝赐教:) 队列: cl ...

  5. 洛谷——P1034 矩形覆盖

    https://www.luogu.org/problem/show?pid=1034 题目描述 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的 ...

  6. input的disabled和readonly区别

    <input name=”country” id=”country” size=12 value=”disabled提交时得不到该值" disabled=”disabled” > ...

  7. A java code

    With the help of LiJun I got a piece of JAVA code. With this code, I can do below things like connec ...

  8. PMVS学习中学习c++

    最近忙于PMVS算法的优化,在这个过程中把这个写下来.仿照已有PMVS源程序,给出自己的一个实现过程. 1.fstream的使用 2.c++中的初始化 3.new创建对象与不用new的区别   我们学 ...

  9. [Python]croppic 裁剪图片的Python后台实现

    import cStringIO import io import base64 from PIL import Image, ImageTk def img_crop_to_file(request ...

  10. 【Linux学习】Ubuntu下 sambaserver搭建

    1.安装samba,smbfs 2.配置smb.conf文件 配置文件之前须要先备份一下须要配置的文件(养成好的习惯) 输入命令: 进入到smb.conf文件里,在文件的最后加入下列语句 保存后.退出 ...