初级菜鸟的作品，各位大佬见笑了
 
<!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. 刷题记录：[CISCN2019 东北赛区 Day2 Web3]Point System

    目录 刷题记录:[CISCN2019 东北赛区 Day2 Web3]Point System 知识点 1.padding-oracle attack 2.cbc字节翻转攻击 3.FFMpeg文件读取漏 ...

  2. CTF 文件上传

    目录 一.客户端校验 1.禁用JS 2.抓包改包 二.服务端校验 1.MIME类型检测 2.后缀名黑名单校验 3.后缀名白名单校验 4.内容头校验 5.竞争上传 6.过滤<?或php 两种校验方 ...

  3. 20189220 余超《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 基础知识概括 操作系统内核实现操作系统的三大管理功能,即进程管理功能,内存管理和文件系统.对应的三个抽象的概念是进程,虚拟内存和文件.其中,操作系统最核心的功能 ...

  4. hangfire控制台应用程序中添加控制面板

    1.使用nuget 管理包安装 Microsoft.AspNet.WebApi.OwinSelfHost 2.根目录添加新建类 名为:Startup.cs public class Startup { ...

  5. mysql实现oracle存储过程默认参数

    我们都知道oracle存储过程支持为参数设置默认值,这样即使存储过程升级,原来的调用也可以不受影响.但是mysql不支持,mariadb也没有支持(截止10.4也是如此).但是这一限制会导致升级麻烦重 ...

  6. Java线程同步的Monitor机制(Lock配合Condition)

    Monitor模式是一种常见的并行开发机制, 一个Monitor实例可以被多个线程安全使用, 所有的monitor下面的方法在运行时是互斥的, 这种互斥机制机制可以用于一些特性, 例如让线程等待某种条 ...

  7. centos7.6环境编译安装php-7.2.24修复最新 CVE-2019-11043 漏洞

    先编译安装php-7.2.24,然后编译安装扩展 主版本地址地址:https://www.php.net/distributions/php-7.2.24.tar.gz # 编译 php-7.2.24 ...

  8. 【前端】input输入框只能输入大于等于0的正数

    大于等于0的正数,允许小数 <input type="number" step="1" min="0" onkeyup="t ...

  9. Redis和Memcached的异同

    Memcached 可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS: 只支持简单的key/value数据结构,不像Redis可以支持丰富的数据类型. 无法进行持久化,数据不能备份,只能用于缓 ...

  10. matlab学习笔记11_1低维数组操作

    一起来学matlab-matlab学习笔记11 11_1 低维数组操作repmat函数,cat函数,diag函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab ...