代码如下

<!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. hdu2009 求数列的和【C++】

    求数列的和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. SVN学习总结（3）——分支合并

    首先在主干trunck上,创建分支branch1.0.0,如下图: 从主干切换到branch1.0.0,在branch1.0.0中添加test.java文件, 分支与主干的合并,首先应将主干trunc ...

  3. python浅拷贝与深拷贝

    今天写程序,人为制造了一个由浅拷贝引起的bug,有必要归纳一下.先附上源代码: class PerformanceTest(object): def __init__(self): ....... s ...

  4. [bzoj4066/2683]简单题_KD-Tree

    简单题 bzoj-4066 题目大意:n*n的棋盘,开始为均为0,支持:单点加权值,查询矩阵权值和,强制在线. 注释:$1\le n\le 5\cdot 10^5$,$1\le m \le 2\cdo ...

  5. Openfire：XMPP的几种消息类型

    XMPP 有以下几种消息类型: l   Normal l   Chat l   Groupchat l   Headline l   Error 根据官方文档(http://www.igniterea ...

  6. 申请Letencrypt的免费证书文件-nginx

    1.前言 Let's Encrypt是国外一个公共的免费SSL项目,由 Linux 基金会托管,它的来头不小,由Mozilla.思科.Akamai.IdenTrust和EFF等组织发起,目的就是向网站 ...

  7. footer在最低显示

    footer在最低显示 http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom

  8. Android studio图片ERROR: 9-patch image xx .9.png malformed

    Android studio 图片错误  9-patch image error in Android ERROR: 9-patch image xx .9.png malformed 1) 异常: ...

  9. swift 雨燕 新手教程

    Apple Swift编程语言新手教程 chox 2014-06-03 文件夹 简单介绍 入门 简单值 控制流 函数与闭包 对象与类 枚举与结构 1   简单介绍 今天凌晨Apple刚刚公布了Swif ...

  10. UIRecorder环境搭建及录制实现

    前天看TesterHome提到UI录制做UI自动化,很感兴趣,前来学习学习. 参考:https://github.com/alibaba/uirecorder/blob/master/doc/zh-c ...