代码如下

<!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. Django——9 博客小案例的实现

    Django  博客小案例的实现 主要实现博客的增删改查功能 主页index.html  -->  展示添加博客和博客列表的文字,实现页面跳转 添加页add.html  --> 输入文章标 ...

  2. 暑假集训D15总结

    考试 日常爆炸= = T1数据背锅,回天乏力 推了两个小时的T2竟然莫名RE,我也是服了 T3考试时就没读懂题,做个鬼啊 今天一直在写某奇怪的技术贴,竟然没有写题解(手动滑稽) 希望明天不要乱炸吧 博 ...

  3. Spring Boot访问mysql(JPA方式)最简单配置

    0.先推荐一个工具--lombok,pom文件如下: <dependency> <groupId>org.projectlombok</groupId> <a ...

  4. nyoj_17_单调递增最长子序列_201403121516

    单调递增最长子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4   输入 ...

  5. 基于zookeeper和强一致性复制实现MySQL分布式数据库集群

    http://qikan.cqvip.com/article/detail.aspx?id=667750898&from=zk_search

  6. ELECTRON开发环境配置方法

    1.下载并安装Node.js 下载地址:https://nodejs.org/en/download/current/ 安装之后进行验证 2.下载并这装electron 安装命令:npm instal ...

  7. [Debug] Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device

    We can emulate different operating systems, browsers, and devices within a desktop operating system. ...

  8. 深入理解android view 生命周期

    作为自定义 view 的基础,如果不了解Android  view 的生命周期 , 那么你将会在后期的维护中发现这样那样的问题 ....... 做过一段时间android 开发的同学都知道,一般 on ...

  9. poj 2763（在线LCA+树状数组）

    Housewife Wind After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ord ...

  10. UESTC--1251--谕神的密码（贪心）

     谕神的密码 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Status ...