网页导航栏的下拉效果，通过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. 腾讯云，搭建python开发环境

    准备工作 任务时间:5min ~ 10min Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.首先我们来看看系统中是否已经存在 Python ,并安装一些开发工具包: 安装前准备 ...

  2. Codeforces 912D - Fishes

    传送门:http://codeforces.com/contest/912/problem/D 本题是一个概率问题——求数学期望. 在一个n×m的方格中,有k个“*”.每个格子里可能有0~1个“*”. ...

  3. noip模拟赛 fateice-string

    题目背景 Aldnoah ——火星上超古代文明留下的能量源,承认初代火星移民雷伊·雷加利亚博士(即后来的薇瑟帝国初代皇帝)为正统继承者,启动因子融入皇族的遗传因子中,只有皇族天生具有Aldnoah的启 ...

  4. noip模拟赛 黑骑士

    题目描述江爷爷给你出了一道题:给你一个图,保证每个点最多属于一个简单环,每个点度数最多为3,求这个图有多少“眼镜图形个数”保证图联通哦~其中“眼镜图形个数”,定义为三元组(x,y,S),其中x和y表示 ...

  5. [cf 599A]Patrick and Shopping

    傻逼题,但是我还是wa了一发. #include <iostream> using namespace std; int main() { long long a,b,c,Ans=0x7f ...

  6. 温故之--Linux 初始化 init 系统

    参选URL: http://www.ibm.com/developerworks/cn/linux/1407_liuming_init1/index.html 本系列一共三篇,看完记住,那水平就不一样 ...

  7. sqlyog

    https://github.com/webyog/sqlyog-community/wiki/Downloads

  8. Clojure：解决Selmer与AngularJS的 标签混淆问题

    Selmer是Clojure的一个模板类库,下面是它的一个DEMO模板: <ul> {% for item in items %} <li>{{item}}</li> ...

  9. MVC.NET：提供对字体文件.woff的访问

    在我们的项目中如果使用到了Bootstrap框架的话,通常都必须要支持对其自带的glyphicons-halflings-regular的font文件的访问. 诸如在MVC.NET中,如果一开始什么设 ...

  10. MVC.Net：WebAPI添加对jsonP的支持

    在某些情况下,我们需要在WebAPI项目中添加对jsonP的支持.比如我们同时创建了MVC.Net和WebAPI两个项目,这两个项目使用不同的端口,这时如果MVC.Net项目的前端想要直接访问WebA ...