<!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. python 基础之深浅拷贝

    深浅拷贝 s=[[1,2],'fgfgf','cx'] s3=s.copy() print(s) print(s3) 测试 D:\python\python.exe D:/untitled/dir/f ...

  2. NGINX生命周期-转

  3. 学习不一样的vue5:vuex(完结)

    学习不一样的vue5:vuex(完结)  发表于 2017-09-10 |  分类于 web前端|  |  阅读次数 4029 首先 首发博客: 我的博客 项目源码: 源码(喜欢请star) 项目预览 ...

  4. 《java核心技术：卷1》PDF版 和 Word版下载

    链接:https://pan.baidu.com/s/1OcpdZ4wfeo55xeJQQBHXRg 提取码:hds0

  5. 卸载sql server 2008

    一．    SQL2008卸载. 1.从控制面板卸载 1)点击计算机右下角“开始”,点击“控制面板” 2)点击“卸载程序”. 3)在程序列表中找到“Microsoft SQL Server 2008” ...

  6. 六 一对多关联查询&关联查询小结

    一对多关联查询:基于用户表关联查询订单表 在pojo中,一的一方方式多的一方的集合 在代理映射中配置查询方法,ResultMap一对多关系(注意:当两表有字段重名时,在一方字段设置别名,以免造成查询混 ...

  7. mysql遇到java.sql.SQLNonTransientConnectionException: Public Key Retrieval is not allowed

    在连接数据库的url中,加上allowPublicKeyRetrieval=true from:https://blog.csdn.net/Gushiyuta/article/details/9323 ...

  8. thinkphp5 + vue nginx配置

    thinkphp5 + vue 配置 server { listen ; listen [::]:; # For https listen ssl; listen [::]: ssl; ssl_cer ...

  9. ZCGL大数据平台日常运维问题与解决方法

    问题:HBase停止 解决方法:重新启动HBase,如下所示 表层问题:插入和查询HBase速度比较慢 排查一,查看HBase节点状态,发现正常运行: 排查二,查看访问HBase服务的状态,发现服务停 ...

  10. 新闻网大数据实时分析可视化系统项目——8、Flume数据采集准备

    Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并 ...