代码如下

<!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. 如何实现在scrapy调试爬虫

    # -*- coding:utf-8 -*- from scrapy.cmdline import execute import sys import os '''在爬虫文件夹下面自定义一个main. ...

  2. 机器学习1k近邻

    自己一直学习计算机视觉方面的东西,现在想学习一下数据挖掘跟搜索引擎,自己基础也有点薄弱,看朱明的那本数据挖掘,只能片面的了解这个数据挖掘.不过最近有一本书 机器学习实战,于是乎通过实战的形式了解一下基 ...

  3. 快速傅立叶变换&HDU 1402

    参考http://www.cnblogs.com/v-July-v/archive/2011/08/13/2214132.html <算导> 那么,更快速的多项式乘法就依赖于能否把一个系数 ...

  4. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  5. linux 搭建https server （apache）

    一.  安装准备 1.    安装Openssl  要使Apache支持SSL,须要首先安装Openssl支持.这里使用的是openssl-0.9.8k.tar.gz    下载Openssl:htt ...

  6. linux下apache+openssl配置记录

    软件环境 Apache Httpd 2.2.29 (http://httpd.apache.org ) OpenSSL 1.0.1h (http://www.openssl.org/source ) ...

  7. hibernate4中oracle,sqlserver,mysql数据库的sql方言配置(SQL Dialects)

    hibernate4中oracle,mysql,sqlserver数据库的sql方言配置(SQL Dialects) 数据库类型 Hibernate sql方言 DB2 org.hibernate.d ...

  8. ASP环境下轻松实现报表的打印 (转）

    作者:zcg2000 一.前言 ASP在电子商务上应用广泛,报表的处理又有一些麻烦.本文介绍了在ASP中利用 本人写的Report Server Page脚本解释器实现报表的显示.打印. 二.准备工作 ...

  9. luogu1991 无线通讯网

    题目大意 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话.任意两个配备了一条卫星电话线路的哨所(两边都ᤕ有 ...

  10. B3402 [Usaco2009 Open]Hide and Seek 捉迷藏 最短路

    直接最短路板子,dij堆优化. 题干: 题目描述 贝茜在和约翰玩一个“捉迷藏”的游戏． 她正要找出所有适合她躲藏的安全牛棚．一共有N(≤N≤)个牛棚,被编为1到N号．她知道约翰(捉牛者)从牛棚1出发． ...