代码如下

<!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. 洛谷 P1308 统计单词数【字符串处理】

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  2. Industrial Nim

    http://codeforces.com/contest/15/problem/C 题意: 现有n个采石场,第i个采石场有mi堆石子 各堆分别有xi,xi+1……,xi+m-1颗石子 两名选手使用最 ...

  3. BNUOJ 3958 MAX Average Problem

    MAX Average Problem Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Jav ...

  4. [bzoj1010][HNOI2008]玩具装箱toy_斜率优化dp

    玩具装箱toy bzoj-1010 HNOI-2008 题目大意:P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一 ...

  5. backup script

    #!/bin/bash ##################################################### # export the whole database use ex ...

  6. applicationcontext理解使用

    Spring ApplicationContext 容器 Application Context 是 spring 中较高级的容器.和 BeanFactory 类似,它可以加载配置文件中定义的 bea ...

  7. 2014 北京 DevFest 大会能够报名啦，小伙伴们还在等什么

    一年一度的大型开发人员活动,2014 北京 DevFest 大会站点正式上线: http://devfest.gdgbeijing.org/. 还等什么,開始报名了! 今年 DevFest 大会将再次 ...

  8. [Android]Fragment源代码分析(三) 事务

    Fragment管理中,不得不谈到的就是它的事务管理,它的事务管理写的很的出彩.我们先引入一个简单经常使用的Fragment事务管理代码片段: FragmentTransaction ft = thi ...

  9. 使用golang来设计我们的Ubuntu Scope

    我们知道golang越来越被非常多的开发人员来开发应用.go语言也能够用于开发Ubuntu Scope. 在今天的教程中.我们将具体介绍怎样使用go语言来开发我们的Scope.这对于非常多的不太熟悉C ...

  10. iOS 运行时添加属性和方法

    第一种:runtime.h里的方法 BOOL class_addProperty(Class cls, const char *name, const objc_property_attribute_ ...