代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

/*初始化全局*/

*{margin:0; padding:0;}

body{background:#737373;}

/*设置导航nav居中*/

nav{background:#fff;text-align:center;}

/*nav属性inliblock 保证居中*/

nav ul{display:inline-block;}

/*设置相对定位，保证子菜单位置*/

nav li{float:left;list-style:none;position:relative;border-bottom:3px #fff solid;}

/*悬停效果*/

nav li:hover{border-bottom:3px #006B8C solid;}

/*设置连接样式，行内->块级*/

nav a{display:block;padding:6px 20px;text-decoration: none;color:#676767;}

nav a:hover{background:#73C39F;color:#fff;}

nav a:active{background:#fff;color:#73C39F;}

/*子菜单清浮动*/

nav li li{float: none;}

/*隐藏子菜单 设置位置*/

nav li ul{display:none;background:#fff;position:absolute;min-width:200px;left:0;top:110%;}

/*三级以后菜单处理*/

nav li li ul{position:absolute;left:100%;top:0;}

/*悬停显示子菜单*/

nav li:hover > ul{display:block;}

    </style>

</head>

<body>

    <div id="container">

        <nav>

            <ul>

                <li><a href="#">一级菜单001</a></li>

                <li><a href="#">一级菜单002</a></li>

                <li><a href="#">一级菜单003</a></li>

                <li><a href="#">一级菜单004</a>

                <ul>

                    <li><a href="#">二级菜单004001</a></li>

                    <li><a href="#">二级菜单004002</a>

                    <ul>

                        <li><a href="#">三级菜单</a></li>

                    </ul>

                    </li>

                </ul>

                </li>

                <li><a href="#">一级菜单005</a></li>

            </ul>

        </nav>

    </div>

</body>

</html>

显示效果：

WEB笔记-CSS 实现多级导航效果的更多相关文章

  1. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  2. 【css】3d导航效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  4. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  5. CSS实现商城分类导航效果（hover选择器）

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...

  6. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  7. amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  8. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  9. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

随机推荐

  1. 00.用 yield 实现 Python 协程

    来源:Python与数据分析 链接: https://mp.weixin.qq.com/s/GrU6C-x4K0WBNPYNJBCrMw 什么是协程 引用官方的说法: 协程是一种用户态的轻量级线程,协 ...

  2. Ubuntu_linux系统与网络服务管理

    1.远程telnet联机:telnetd: 2.远程加密ssh联机:openssh: 3.webmin远程联机:webmin: 3.VNC远程图像界面控制:vino: 4.NAT网关服务器:iptab ...

  3. 对vuex的浅解

    vuex是什么? 官网的解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也 ...

  4. jquery 插件封装模板

    //插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...

  5. Maven学习总结（8）——使用Maven构建多模块项目

    Maven学习总结(八)--使用Maven构建多模块项目 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最常见的就是分为domain(域模型层).dao(数据库访问层). ...

  6. 树 (p155, 从中序和后续回复二叉树)

    递归求解, You are to determine the value of the leaf node in a given binary tree that is the terminal no ...

  7. O - String Problem KMP 字符串最小表示法

    Give you a string with length N, you can generate N strings by left shifts. For example let consider ...

  8. [bzoj4010][HNOI2015]菜肴制作_贪心_拓扑排序

    菜肴制作 bzoj-4010 HNOI-2015 题目大意:给定一张n个点m条边的有向图,求一个toposort,使得:(1)满足编号为1的点尽量在前:(2)满足(1)的情况下编号为2的点尽量在前,以 ...

  9. luogu3084 Photo 单调队列优化DP

    题目大意 农夫约翰决定给站在一条线上的N(1 <= N <= 200,000)头奶牛制作一张全家福照片,N头奶牛编号1到N.于是约翰拍摄了M(1 <= M <= 100,000 ...

  10. C# WinForm小程序（技术改变世界-cnblog）

    WinForm小程序(技术改变世界-cnblog)   需求: 1.点击按钮  更新 当前时间 2.输入 身份证,必须身份证 排序(类似银行卡那样的空格),自动生成空格排序 3.实现 必须按 第一个按 ...