初级菜鸟的作品，各位大佬见笑了
 
<!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. Windows下多个JDK版本的切换方法

    问题 因我之前在window中无法命令行输入,后来发现是电脑中存在多个JDK,导致设置混乱. 于是,我继续深入研究了当电脑存在多个JDK的情况下,如何设置想要的JDK版本. 步骤 1.更改环境变量 进 ...

  2. 【软工实践】Beta冲刺（3/5）

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 新增数据分析展示等功能API 服务器后端部署,API接口的beta版实现 展示 ...

  3. 解决'python -m pip install --upgrade pip' 报错问题

    再安装包的时候提示 You are using pip version 9.0.3, however version 10.0.1 is available.You should consider u ...

  4. Java-Maven（十二）：idea多项目：common module进行compiler和install正常，运行domain-perf module提示：Could not resolve dependencies for project

    前提: product项目下有三个module,分别是: driver module domain-perf module common module 问题: driver 和 domain-perf ...

  5. mariadb 10.2/mysql 8.0实现递归

    借助mysql 8.0的cte(它是iso sql标准的一部分),可以实现递归,mariadb 10.2.2开始支持递归cte,如下: +----+----------+--------------+ ...

  6. easyui 如何为datagrid添加自定义列属性（如：width,align,editor）

    我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...

  7. nginx-rtmp

    最近使用ffmpeg推流为rtmp,进行直播.记录一下nginx-rtmp的配置.因为我们要添加ngin-rtmp模块,所以不能直接apt安装. 下载niginx和nginx-rtmp-module的 ...

  8. navicat for mysql 如何设置字段唯一

    在设计表时,上面会有索引这一项 点开,在栏位处选择你需要设置的字段,然后选择unique索引类型即可 望采纳,谢谢!

  9. Spring cloud微服务安全实战-7-4整合SpringBoot和Prometheus

    pom文件里面加两个依赖.让SpringBoot暴露出一些断点. 在actuator的机制上面加一些prometheus的端点,暴露出来给prometheus可以识别的数据, 配置文件配置. 要暴露的 ...

  10. [LeetCode] 257. Binary Tree Paths 二叉树路径

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...