<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            *{
                margin:0px;
                padding: 0px;
            }

.nav{
                width: 500px;
                height: 46px;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 900;
            }
            .nav-title{
                width: 100px;
                max-height: 46px;
                text-align: center;
                line-height: 46px;
                float:left;
                background-color: #018b3e;
                font-size: 20px;
                overflow: hidden;
                transition: 0.5s;
            }
            .nav-title:hover{
                background-color:#ff6b00;
                cursor: pointer;
                max-height: 500px;                
            }
            .nav-title ul{
                list-style:none;
            }
            .nav-title li{
                background-color:red;
            }
            .nav-title li:hover{
                cursor: pointer;
                background-color:rosybrown;
            }
            .content{
                width: 500px;
                height: 500px;
                margin-top: 46px;
                position: absolute;
                background-color: cornflowerblue;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <div class="nav-title">FF
                <ul>
                    <li>div</li>
                    <li>span</li>
                    <li>img</li>
                    <li>pr</li>
                    <li>body</li>
                </ul>
            </div>
            <div class="nav-title">HTML
                <ul>
                    <li>div</li>
                    <li>span</li>                    
                </ul>
            </div>
            <div class="nav-title">CSS
                <ul>
                    <li>div</li>
                    <li>span</li>
                    <li>img</li>                    
                </ul>
            </div>
            <div class="nav-title">.NET
                <ul>
                    <li>div</li>                    
                </ul>
            </div>
            <div class="nav-title">JAVASCRIPT
                <ul>
                    <li>div</li>
                    <li>span</li>
                    <li>img</li>
                    <li>pr</li>                    
                </ul>
            </div>
        </div>
        <div class="content">
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>    
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
            12334556667<br>
        </div>
    </body>
</html>

CSS：导航栏下拉菜单模板的更多相关文章

  1. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  4. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  5. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  6. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  7. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

随机推荐

  1. UIAutomation 测试winForm

    static void Main(string[] args) { Console.WriteLine("\n开始窗口程序自动化测试\n"); //启动被测试程序 string p ...

  2. 攻防世界Web进阶-Upload1

    进入题目 题目提示上传文件,准备好一句话木马. 发现只能上传图片文件,那么再准备一个图片的一句话木马.上传. 浏览器开代理,使用burpsuite拦截,修改文件后缀名为php,否则无法连接 使用蚁剑连 ...

  3. 吴裕雄--天生自然ORACLE数据库学习笔记：数据表对象

    create table students( stuno ) not null, --学号 stuname ), --姓名 sex ), --性别 age int, --年龄 departno ) n ...

  4. Python函数-2 匿名函数

    匿名函数 当我们在创建函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便.这省去了我们挖空心思为函数命名的麻烦,也能少写不少代码,很多编程语言都提供这一特性. Python语言使用lamb ...

  5. Python基础-3 输入输出

    输入输出 input输入函数 input函数:获取用户输入,保存成一个字符串.重要的话,说两遍,input函数的返回值是一个字符串类型.哪怕你输入的是个数字1,返回给你的只会是字符串"1&q ...

  6. 收藏 40 2 CPD （广告合作方式）

    CPD,Cost per day的缩写,意思是按天收费,是一种广告合作方式. 在实际的广告合作中根据行业不同还包括Cost per Download的缩写含义,意思是依据实际下载量收费.   “CPD ...

  7. Linux基础网络配置

    目录 Linux基础网络配置 参考 IP配置 Route配置 DNS指向 ss命令 *网络排查工具 Linux基础网络配置

  8. angular 自定义服务封装自定义http请求

    在angular中将http请求,放置在一起封装成服务,可减少代码重复,方便使用 var ngpohttprest = angular.module('ngpohttprest', []); ngpo ...

  9. python之常见模块（time,datetime,random,os,sys,json,pickle）

    目录 time 为什么要有time模块,time模块有什么用?(自己总结) 1. 记录某一项操作的时间 2. 让某一块代码逻辑延迟执行 时间的形式 时间戳形式 格式化时间 结构化时间 时间转化 总结: ...

  10. 【剑指Offer面试编程题】题目1523：从上往下打印二叉树--九度OJ

    题目描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行一个整数n(1<=n<=1000, ...