初级菜鸟的作品，各位大佬见笑了
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
     *{
            margin:0;
            padding:0;
        }
        ul,ol,li{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        /*给a去掉下划线*/
        .nav{
            width: 606px;
            height: 40px;
            background: #ccc;
            margin: 100px auto;
        }
       
        div{
            width: 100%;
            height: 40px;                   /* 试图给ul加上一个整体div，使得看起来更舒服点=。= */
            background: darkgrey;
        }
        .nav li{
            float: left;
            position: relative;
        }
        .nav li a{
            display: block;
            width: 100px;
            height: 40px;
            background-color:darkgrey;
            border-right:1px solid #fff;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: white;
        }
        .nav li a:hover{
            background: darkgrey;
            color: black;
            text-decoration: underline;
        }
        .nav li .nav2{
            position:absolute;
            display:none;/*初始状态二级导航隐藏*/
        }
        .nav li:hover .nav2{
            display: block;
        }
</style>
<body>
     <div id="header">
        <ul class="nav">
            <li>
                <a href="#" target="_blank">网站首页</a>
            </li> 
            <li>
                <a href="#" target="_blank">公司简介</a>
            </li>
            <li>
                <a href="#" target="_blank">产品类型</a>
                <ul class="nav2">
                        <li>
                            <a href="#">产品1</a>
                        </li>
                        <li>
                            <a href="#">产品2</a>
                        </li>
                        <li>
                            <a href="#">产品3</a>
                        </li>
                        <li>
                            <a href="#">产品4</a>
                        </li>
                    </ul>
            </li>
            <li>
                <a href="#" target="_blank">新闻中心</a>
            </li>
            <li>
                <a href="#" target="_blank">在线招聘</a>
                <ul class="nav2">
                    <li>
                        <a href="#">校园招聘</a>
                    </li>
                    <li>
                        <a href="#">实习生招聘</a>
                    </li>
                    <li>
                        <a href="#">社会招聘</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" target="_blank">联系我们</a>
                <ul class="nav2">
                        <li>
                            <a href="#">客服1</a>
                        </li>
                        <li>
                            <a href="#">客服2</a>
                        </li>
                        <li>
                            <a href="#">客服3</a>
                        </li>
                        <li>
                            <a href="#">客服4</a>
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
    </body>
</html>

1+X学习日志——导航栏demo的更多相关文章

  1. 一个可以拓展的垂直多级导航栏 Demo

    大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: <!DOCTYPE ...

  2. iOS学习——更改导航栏的返回按钮的标题与颜色

    转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...

  3. 固定导航栏demo

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  4. Mybatis学习笔记导航

    Mybatis小白快速入门 简介 本人是一个Java学习者,最近才开始在博客园上分享自己的学习经验,同时帮助那些想要学习的uu们,相关学习视频在小破站的狂神说,狂神真的是我学习到现在觉得最GAN的老师 ...

  5. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

  6. 【Flutter学习】基本组件之AppBar顶部导航栏

    一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一 ...

  7. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

  8. 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）

    利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...

  9. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

随机推荐

  1. Monkey框架（测试方法篇） - monkey日志分析

    Monkey日志分析是Monkey测试中非常重要的一个环节,通过日志分析,可以获取当前测试对象在测试过程中是否会发生异常,以及发生的概率,同时还可以获取对应的错误信息,帮助开发定位和解决问题.介绍日志 ...

  2. GPU性能越来越强大，为何直到现在还是不能取代CPU？

      从思路上说,GPU相当于火车,一个车头带几十节车厢,一下子把成千上万吨货全给你拉目的地:CPU相当于汽车,拉货旅游样样能干.因此,如果单纯比运力,一列火车比得过成百上千辆汽车:但如果几百人有几百个 ...

  3. openstack错误问题定位及调试

  4. arcpy实例教程-地图范围导出到要素类

    arcpy实例教程-地图范围导出到要素类 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 功能:将当前地图范围导出到内存要素类 描述:将当前地图的 ...

  5. Oracle系列四 单行函数查询语句

    单行函数 操作数据对象 接受参数返回一个结果 只对一行进行变换 每行返回一个结果 可以转换数据类型 可以嵌套 参数可以是一列或一个值 包含:字符,数值,日期,转换,通用 字符函数 1.大小写控制函数: ...

  6. 转 perl DBI 总结

    https://www.cnblogs.com/homezzm/archive/2011/07/22/2113618.html ##查看已经安装的包 #!/usr/bin/perluse strict ...

  7. 【翻译】Flink Table Api & SQL — 用户定义函数

    本文翻译自官网:User-defined Functions  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/tabl ...

  8. flex布局大全 2019

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  9. [LeetCode] 312. Burst Balloons 爆气球

    Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...

  10. .Net Core使用 MiniProfiler 进行性能分析

    官方文档: https://miniprofiler.com/dotnet/AspDotNetCore 1.添加包 MiniProfiler.AspNetCore.Mvc   和    MiniPro ...