<!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. vfs_path_lookup

    1: void lookupInode() 2: { 3: struct dentry* root_dentry; 4: struct vfsmount* root_mnt; 5: const cha ...

  2. svn向服务器添加新建文件夹

    tip: 1)提交文件分为两步,先将要提交的文件加入缓存区,然后将文件提交 2)add:添加的意思.commit:提交的意思 第一步:加入缓存区(如图) 1)选择要提交的文件 2)右键svn---&g ...

  3. 剑指offer——73股票的最大利润

    题目: 假设把某股票的价格按照时间先后顺序存储在数组中,请问买卖该股票一次可能获得的最大利润是多少?例如,一只股票在某些时间节点的价格为{9,11,8,5,7,12,16,14}.如果我们能在价格为5 ...

  4. JDK8新特性之接口默认方法与静态方法

    接口默认方法与静态方法 有这样一些场景,如果一个接口要添加一个方法,那所有的接口实现类都要去实现,而某些实现类根本就不需要实现这个方法也要写一个空实现,所以接口默认方法就是为了解决这个问题. 接口静态 ...

  5. leetcode.数组.16最接近的三数之和-java

    1. 具体题目 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案 ...

  6. JQ基本

    jQuery的入口函数: 特点:1. 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装. 2. 相当于原生js中的DOMContentLoaded. ...

  7. 内网端口转发[SSH]

    一.应用场景 获取到目标边界机器linux服务器一台,想继而向内网其他机器渗透,获取到一台webshell发现处于内网当中且不通外网.可以通过linux ssh隧道对目标内网机器进行访问. 二.利用手 ...

  8. 基于用户的协同过滤（UserCF）

  9. ES6-let cont 关键字

    ***let1. 作用: * 与var类似, 用于声明一个变量2. 特点: * 在块作用域内有效 * 不能重复声明 * 不会预处理, 不存在提升3. 应用: * 循环遍历加监听 * 使用let取代va ...

  10. Dom编程优化

    对Dom的访问代价是昂贵,在富网页应用中通常是性能的瓶颈,所以对Dom的优化十分重要. 一.访问和修改Dom元素 浏览器通常要求JavaScript和Dom实现保持独立的.例如,在Internet E ...