<!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. 用Struts2框架报错：The Struts dispatcher cannot be found

    报错信息 The Struts dispatcher cannot be found.  This is usually caused by using Struts tags without the ...

  2. Vim 入门使用

    参考资料:https://www.runoob.com/linux/linux-vim.html   本篇内容不全,其余内容请参考该链接 vim/vi 是Linux下常用的文本编辑工具,它基本上有三种 ...

  3. 一起探讨Go 语言为什么能成功？

    导读 两位创造者Rob Pike和Robert Griesemer一起探讨了Go成功的原因. 常言道,历史不会重演,但总会惊人的相似. 如果您想创建一种编程语言,多向那些有经验的人士学习,他们有很多可 ...

  4. Android学习笔记17：单项选择RadioButton和多项选择CheckBox的使用

    请参见 http://www.android100.org/html/201406/05/19495.html

  5. java 中类加载器

    jar 运行过程和类加载机制有关,而类加载机制又和我们自定义的类加载器有关,现在我们先来了解一下双亲委派模式. java 中类加载器分为三个: BootstrapClassLoader 负责加载 ${ ...

  6. partition_show , a new version to check partition table status in sqlserver

    Dear all: I had put "partition_show" before . but this time it makes faster. partition_sho ...

  7. Controller生命周期

    1. 实例化 alloc/init, initWithNibName 2.awakeFromNib 从nib创建Controller对象 3.get/set outlets 4. viewDidLoa ...

  8. 算法设计与分析 - AC 题目 - 第 5 弹（重复第 2 弹）

    PTA-算法设计与分析-AC原题 - 最大子列和问题 (20分) 给定K个整数组成的序列{ N1, N2, ..., NK },“连续子列”被定义为{ Ni, Ni+, ..., Nj },其中 ≤i ...

  9. 关于HTTP 协议

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  10. LeetCode 1025. Divisor Game

    题目链接:https://leetcode.com/problems/divisor-game/ 题意:Alice和Bob玩一个游戏,Alice先开始.最初,黑板上有一个数字N.每一轮,选手首先需要选 ...