<!DOCTYPE html>

<html>

<head>

    <title>三级菜单</title>

    <meta charset="utf-8" />

<style type="text/css">

/*添加视觉样式*/

.multi_drop_menu {font:1em helvetica, arial, sans-serif;}

.multi_drop_menu a { display: block; color: #555; background-color: #eee; padding: 0.2em 1em; border-width: 3px; border-color: transparent; }

.multi_drop_menu a:hover {color:#fff;background-color:#aaa;}

.multi_drop_menu a:active {background:#fff;color:#ccc;}

/*添加功能样式*/

.multi_drop_menu * {margin:0; padding:0;}

/*强制 ul 包围 li*/

.multi_drop_menu ul {float:left;}

.multi_drop_menu li {/*水平排列菜单项*/float:left;/*去掉默认的项目符号*/list-style-type:none;/*为子菜单提供定位上下文*/position:relative;}

.multi_drop_menu li a {/*给每个链接添加一个右边框*/border-right-style:solid;/*背景只出现在内边距区域后面*/background-clip:padding-box;/*去掉链接的下划线*/text-decoration:none;}

.multi_drop_menu li:last-child a {border-right-style:none;}

/* 添加的视觉样式 */

/*二级菜单宽度*/

.multi_drop_menu li ul {width:8em;}

.multi_drop_menu li li a {/*去掉继承的右边框*/border-right-style:none;/*添加上边框*/border-top-style:solid;}

/* 添加的功能样式 */

.multi_drop_menu li ul {display:none;/*相对于父菜单项定位*/position:absolute;/*左边与父菜单项对齐*/left:0;/*顶边与父菜单项底边对齐*/top:100%;}

.multi_drop_menu li li {/*停止浮动，恢复堆叠*/float:none;}

.multi_drop_menu li li ul {/*继续隐藏三级下拉菜单*/display:none;}

.multi_drop_menu li:hover > ul {/*父元素悬停时显示*/display:block;}

.multi_drop_menu li li ul {/*相对于父菜单定位*/position:absolute;/*与父菜单右侧对齐*/left:100%;/*与父菜单项顶边对齐*/top:0;}

/* 垂直列表 */

.multi_drop_menu.vertical {width:8em;}

.multi_drop_menu.vertical li a {border-right-style:none;border-top-style:solid;}

.multi_drop_menu.vertical li li a {border-left-style:solid;}

.multi_drop_menu.vertical ul,.multi_drop_menu.vertical li {/* 让顶级菜单垂直显示*/float:none;}

.multi_drop_menu.vertical li ul {/*子菜单左边与上一级菜单右边对齐*/left:100%;/*子菜单顶边与上一级菜单项顶边对齐*/top:0;}

.multi_drop_menu li:hover > a {/*悬停时的文本颜色*/color:#fff;/*悬停时的背景颜色*/background-color:#aaa}

</style>

</head>

<body>

    <nav class="multi_drop_menu vertical">

    <!-- 一级开始 -->

        <ul>

            <li><a href="#">首页</a>

                <!-- 二级开始 -->

                <ul>

                    <li><a href="#">第二</a>

                        <!-- 三级开始 -->

                        <ul>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                        </ul>

                        <!-- 三级结束 -->

                    </li>

                    <li><a href="#">第二</a>

                        <!-- 三级开始 -->

                        <ul>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                        </ul>

                        <!-- 三级结束 -->

                    </li>

                    <li><a href="#">第二</a>

                        <!-- 三级开始 -->

                        <ul>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                            <li><a href="#">第三</a></li>

                        </ul>

                        <!-- 三级结束 -->

                    </li>

                    <li><a href="#">第二</a></li>

                </ul>

                <!-- 二级结束 -->

            </li>

            <li><a href="#">第一</a></li>

            <li><a href="#">第一</a></li>

            <li><a href="#">第一</a></li>

        </ul>

        <!-- 一级结束 -->

    </nav>

</body>

</html>

纯css制作三级菜单的更多相关文章

  1. web中用纯CSS实现筛选菜单

    web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...

  2. 纯CSS制作水平垂直居中“十字架”

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

  3. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  4. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  6. 纯CSS二级纵向菜单

    纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...

  7. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  8. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  9. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

随机推荐

  1. SDUTOJ 3374 数据结构实验之查找二：平衡二叉树

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/3374.html 题目大意 略. 分析 ...

  2. HTML中改变列表的序号类型

    HTML中,<ol>标签表示有序列表,每一个表项的编号默认从数字开始.比如 <html> <head> <title>test</title> ...

  3. 前端 css 进阶

    内容目录: 1.css盒子模型 2.浮动 float 3.溢出 overflow 4.定位 position 5. z-index 6.opacity 1.css盒子模型 margin:用来调节盒子与 ...

  4. Spring与Struts2 的整合使用

    Spring与Struts2 的整合使用 项目结构 再Struts2 中(还没有与Spring整合时),它创建Action类的依据 <action name="second" ...

  5. Python学习笔记（七）——魔法方法

    1.构造和析造 魔法方法就是被双下划线包围的方法 __init__()方法 __init__方法默认没有参数,返回值为none.类实例化对象需有明确的初始化步骤要重写函数 >>> c ...

  6. html input 上capture 参数在 安卓 苹果上的异同

    安卓上 <input type="file" accept="image/*" capture="camera"> //只调用相 ...

  7. centos做免密登录

    CentOS 6.9 SSH配置用户免密码登录 1. 演示环境: 192.168.1.144:CentOS 6.9 x86_64 192.168.1.146:CentOS 7.4 x86_64 2.  ...

  8. poi之Excel（在线生成）下载

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. poi之Excel下载 @RequestMappi ...

  9. Linux/Mac中alias的使用

    最近在设置代理的时候,每次手写不方便,想起linux有个alias命令可以用,防止忘记,这边记录一下 一.alias 设置 1.设置别名 proxy # 1. # 设置别名前,使用 `type 自定义 ...

  10. 移动端单选插件-jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...