<!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. 【PAT甲级】1023 Have Fun with Numbers (20 分)

    题意: 输入一个不超过20位的正整数,问乘2以后是否和之前的数组排列相同(数字种类和出现的个数不变),输出Yes或No,并输出乘2后的数字. AAAAAccepted code: #define HA ...

  2. 创建私有yum仓库

    创建私有yum仓库

  3. ClientAbortException: java.io.IOException: 您的主机中的软件中止了一个已建立的连接。，进不了Debug，访问不到方法

    开发项目的时候运行报错,Debug进不去方法,猜想是js中ajax的url 路径的问题,后来找公司的斌哥解决了问题,感谢! 异常: 解决过程: 清理缓存,修改js代码,通过浏览器的F12查看,发现修改 ...

  4. 「Luogu4556」Vani有约会-雨天的尾巴

    「Luogu4556」Vani有约会-雨天的尾巴 传送门 很显然可以考虑树上差分+桶,每次更新一条链就是把这条链上的点在桶对应位置打上 \(1\) 的标记, 最后对每个点取桶中非零值的位置作为答案即可 ...

  5. python 基础之浅拷贝与深拷贝

    浅拷贝与深拷贝 1.普通赋值 例1: a = 15b = aa = 16print(b)#例2:lst1 = [1,2,3]lst2 = lst1lst1.append(4)print(lst2)#这 ...

  6. MyBatis的2个核心对象：SqlSessionFactory、SqlSession

    SqlSessionFactory SqlSessionFactory是单个数据库映射关系经过编译后的内存镜像,主要作用是创建SqlSession. InputStream inputStream = ...

  7. C# Connection：连接数据库---转载

    C# 语言中 Connection 类是 ADO.NET 组件连接数据库时第一个要使用的类,也是通过编程访问数据库的第一步. 接下来我们来了解一下 Connection 类中的常用属性和方法,以及如何 ...

  8. video-player

    1. VLC 2. MPlayer 3. FFmpeg 4. 显示媒体信息 5. 视频播放器软件比较 1. VLC https://www.videolan.org/vlc/ https://en.w ...

  9. struts的错误回显

  10. python异常处理（学习）

    异常处理可以保证程序在恶劣的环境也能运行,或者给用户相关的提示 如下是运行异常的情况 如无异常 也可以创建异常处理类型