<!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. SQlite 学习资料

      很有用的开源跨平台数据库,可以作为客户端的小型内存数据库使用,据说它有N多用户(Nokia's Symbian,Mozilla,Abobe,Google,阿里旺旺,飞信,Chrome,FireFo ...

  2. 自从阿里买了Flink母公司以后，你不懂Flink就out了！

    个免费报名权限 Ps:小助理手动给大家发送资料,精力有限,仅限前100名免费领取,这份资料对于想要提升大数据技能进阶的小伙伴来说,将会是一份不可或缺的宝贵资料. 特别感谢飞总的部分原创支持!

  3. MyEclipse中最常用的快捷键大全

    1. [ALT+/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2. [C ...

  4. http://localhost:8080 is requesting your username and password

    after you startup your tomcat,  you type a concrete request url  in broswer, the tomcat probably wil ...

  5. 批量Ping执行Bash脚本

    #!/bin/bash # Ping Batch Script # 连接超时时间 TMOUT= # 最大线程数 MAX_THREAD= # 保留内存大小 MIN_MEM= # 默认ip配置,可通过 - ...

  6. BCZM: Chapter 1

    1.1 CPU 占用率 https://www.cnblogs.com/TenosDoIt/p/3242910.html 1.2 中国象棋将帅 https://blog.csdn.net/kabini ...

  7. Java——对象

    1.2对象 1.2.1 对象的创建和使用 ①使用new + 构造器创建一个新的对象: ②使用“对象名.对象成员”的方式访问对象成员(包括属性和方法). public class Animal { pu ...

  8. bzoj1217: [HNOI2003]消防局的设立 [树形dp]

    Description 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了 ...

  9. 【SPOJ DQUERY】区间数字统计

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 因为区间的端点移动一个单位的话,只会涉及到一个元素的增多或减少. 因此可以用莫队算法来解决. 只需要开一个数组(大小1百万),用下标来快速检索 ...

  10. 排列+函数映射——hdu6038好题

    /* 引理:[0,n-1]的排列,i向a[i]连边,那么每个数必定在一个环中 所以数组a可以分割成一些环,数组b也可以分割成一些环 先讨论a的一个环 a[a1]=a2 a[a2]=a3 a[a3]=a ...