初级菜鸟的作品，各位大佬见笑了
 
<!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. 菜鸟教程C++（一）

    一.C++基本语法 C++程序可以定义为对象的集合,这些对象可以通过调用彼此的方法进行交互. 对象:对象具有状态和行为.例如:一只狗的状态:颜色.名称.品种等,行为:摇动.叫唤等.对象是类的实例. 类 ...

  2. NIO 选择器 Selector

    选择器提供选择执行已经就绪的任务的能力,这使得多元 I/O 成为可能.就像在第一章中描述的那样,就绪选择和多元执行使得单线程能够有效率地同时管理多个 I/O 通道(Channels).C/C++代码的 ...

  3. NIO Channel 管道

    Java NIO的通道类似流,但又有些不同: 既可以从通道中读取数据,又可以写数据到通道.但流的读写通常是单向的. 通道可以异步地读写. 通道中的数据总是要先读到一个Buffer,或者总是要从一个Bu ...

  4. mocha单元测试简易教程

    mocha单元测试简易教程 写在前面 其实mocha单元测试的教程网上有很多,也都很简单易懂,但是每个人对同一份的教程也会产生不同的理解,像我这种大概就是走遍了所有弯路才到达终点的人,想通过给大家分享 ...

  5. 可伸缩性架构常用技术——之数据切分 Data Sharding/Partition

    1. 简介 本来想写一篇可伸缩性架构方面的文章,发现东西太多了,久久未能下笔,这里首先把大家最关注的数据切分(Partition/Sharding)方面的内容先写完,给大家参考. 我们知道,为了应对不 ...

  6. vue-admin-template 切换回中文

    使用vue-admin-template开发项目,使用的是element-ui的控件,但这个框架走的是国际化,是英文版,好吧!快速切换为中文版: 找到main.js 第七行: 替换为: import ...

  7. Sword C语言原子操作

    /* gcc内置原子操作 */ #include <stdio.h> /* 知识补充: gcc 4.1.2版本之后,对X86或X86_64支持内置原子操作.即不需要引入第三方库(如pthr ...

  8. [译]Pandas列数据展示不全解决方法？

    Pandas数据展示列太多会显示...不显示具体数据. 设置参数可以显示全部数据: pd.set_option('display.expand_frame_repr', False)

  9. PyTorch之DataLoader杂谈

    输入数据PipeLine pytorch 的数据加载到模型的操作顺序是这样的: ①创建一个 Dataset 对象②创建一个 DataLoader 对象③循环这个 DataLoader 对象,将img, ...

  10. knuth洗牌算法

    首先来思考一个问题: 设计一个公平的洗牌算法 1. 看问题,洗牌,显然是一个随机算法了.随机算法还不简单?随机呗.把所有牌放到一个数组中,每次取两张牌交换位置,随机 k 次即可. 如果你的答案是这样, ...