二级导航栏制作：

1.将一级导航栏去除列表样式（list-style:none），并给予浮动，使其横向排列（float:left）

2.给每个li中添加一个<a></a>标签，给a设置样式,使其成为块级元素( display:block)，这样只需要点击当前 li 范围区域即可触发a的跳转

3.给需要添加二级导航栏的li里面添加 ul>li ,给个类名，设置其样式为（display:none），使其在普通情况下隐藏

4.设置一级导航栏划过效果，当滑到有二级导航栏的 li 时，设置二级导航栏状态为（display:block）,即为显示状态

<!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">

    <!-- <link rel="stylesheet" href="./../common/common.css"> -->

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        .one{

            width: 600px;

            background-color: coral;

            height: 30px;

            margin: 0 auto;

        }

        .one li{

            float: left;

            width: 100px;

            text-align: center;

            line-height: 30px;

        }

        .one li:hover{

            background-color: #fff;

            color: coral;

        }

        .one .two{

            display: none;

        }

        .one li:hover .two{

            display: block;

        }

        .one .two li{

            background-color: cadetblue;

        }

        .one .two li:hover{

            background-color: honeydew;

        }

        a{

            display: block;

            text-decoration: none;

        }

    </style>

</head>

<body>

    <ul class="one">

        <li><a href="">一级</a> </li>

        <li><a href="">一级</a> </li>

        <li><a href="">一级</a>

            <ul class="two">

                <li><a href="">二级</a> </li>

                <li><a href="">二级</a> </li>

                <li><a href="">二级</a> </li>

            </ul>

        </li>

        <li><a href="">一级</a> </li>

        <li><a href="">一级</a> </li>

        <li><a href="">一级</a> </li>

    </ul>

</body>

</html>

　　

html css二级导航栏的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. JS写的二级导航栏（利用冒泡原理）

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  3. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  5. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  6. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  7. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

  8. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

随机推荐

  1. zabbix流量过大就断图

    监控内网千兆交换机,流量图断断续续,大概位于400-500兆就会断图,而且还不准. 按照这个操作几乎可以成功 链接:http://itfish.net/article/23536.html     h ...

  2. K8S ? K3S !

    K8S ? K3S ! K3S 踩坑开始 歪比歪比(奇怪的服务器) 服务器选择我熟悉的 Centos K3S内置 Containerd 但是!作为一个服务器使用自然是要用常见的一点的容器 Docker ...

  3. 10个用于C＃.NET开发的基本调试工具

    在调试软件时,工具非常重要.获取正确的工具,然后再调试时提起正确的信息.根据获取的正确的错误信息,可以找到问题的根源所在.找到问题根源所在,你就能够解决该错误了. 你将看到我认为最基本的解决在C# . ...

  4. axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

    1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...

  5. 微信小程序入门笔记-账号注册（1）

    小程序注册 微信小程序开发之前,必须先有小程序账号,下面是注册步骤: 1.打开网页 微信公众平台https://mp.weixin.qq.com/,点击立即注册按钮 2.注册类型 选择小程序开发 3. ...

  6. centos7.x中安装SQL Server

    本文内容是采集的好几位博主的博文进行的一个整合,内容更为精准和详尽,以下是我参照的几篇博文地址: 微软官方文档:https://docs.microsoft.com/zh-cn/sql/linux/s ...

  7. 基于JavaSwing开发银行信用卡管理系统

    开发环境: Windows操作系统开发工具: MyEclipse10/Eclipse+Jdk+Mysql数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php? ...

  8. 消息队列（三）Apache ActiveMQ

    在Ubuntu上安装ActiveMQ 系统初始化 $ sudo apt update $ sudo apt dist-upgrade $ sudo apt autoremove $ sudo apt ...

  9. 回炉重造之重读Windows核心编程-004-进程

    进程是一个正在运行的程序的实例,由内核对象和地址空间组成.进程是不活泼的,执行地址空间中代码的是在它的环境中运行线程.每个线程都需要自己的一组CPU寄存器和堆栈. 为了让所有线程都能运行,操作系统就要 ...

  10. LINUX系统(CentOS7安装)一之JDK8的安装

    JDK 的安装系统安装就不做过多介绍,大家从网上寻找安装步骤进行安装,不过我推荐大家进行安装时选择桌面图形化格式进行安装,方便做一部分操作,同时在安装过程中选择英文模式,同时我自己在安装的过程中发现使 ...