<!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. 剑指offer——50最长不含重复字符和子字符串

    题目: 请从字符串中找出一个最长的不包含重复字符的子字符串,计算该最长子字符串的长度.假设字符串中只包含’a~z”的字符.例如,在字符串“arabcacfr"中,最长的不含重复字符的子字符串 ...

  2. 剑指offer——41数组中出现次数超过一半的数字

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  3. gitlab开机启动|启动 停止 重启

    修改配置后的初始化 gitlab-ctl reconfigure 启动 sudo gitlab-ctl start 停止sudo gitlab-ctl stop 重启sudo gitlab-ctl r ...

  4. pytest--fixture之参数化

    场景:测试用例执行时,有的用例需要登陆才能执行,有些用例 不需要登陆.setup和teardown无法满足.fixture可以.默认 scope(范围)function • 步骤: 1. 导入pyte ...

  5. ARM 汇编指 跳转指令 b , bl

    1. 跳转指令 [ b ] [ bl ]   指令格式:<opcode><cond> <address> 不带返回的跳转指令:b mov r0, #0x12 mov ...

  6. CentOS7.6安装Go-1.12.9

    安装步骤 Go的官网:https://golang.google.cn 1. 下载压缩包 wget https://dl.google.com/go/go1.12.9.linux-amd64.tar. ...

  7. struts2验证器

    1. Struts2 的验证(note6,struts2-8) 1). 验证分为两种: > 声明式验证* >> 对哪个 Action 或 Model 的那个字段进行验证 >&g ...

  8. Charles使用技巧

    过滤不必要请求 有些时候会抓取到很多自己不需要的请求 ,看起来不直观 只想抓包自己关心的地址 在外部设备抓包 比如你的手机设备 电脑模拟器等 本质就是你通过Charles开启一个代理端口,无论是外部设 ...

  9. http/tcp/ip/端口

    http是www服务器和本地浏览器之间传输超文本的协议. 每一台机器都有一个属于自己的ip地址,计算机也需要知道是哪个程序来接受信息,这里也就引入了端口号,可以简单地理解每一个程序都有一个唯一的端口号 ...

  10. struts-config.xml

    <struts-config>是struts的根元素,它主要有8个子元素,DTD定义如下: <!ELEMENT struts-config (data-sources?,form-b ...