<!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. PyUnit (unittest) 的用法

    PyUnit(unittest) 是 Python 自带的单元测试框架,用于编写和运行可重复的测试.PyUnit 是 xUnit 体系的一个成员,xUnit 是众多测试框架的总称,PyUnit 主要用 ...

  2. <Git>git学习

    1.安装 分布式版本控制:工作电脑保存完整的代码,中央服务器挂了也可以使用 集中式版本控制:中央服务器挂了就凉凉 sudo apt-get install git git安装 检测安装成功 git 2 ...

  3. 【洛谷】P1229快速幂

    题目链接:https://www.luogu.org/problemnew/show/P1226 题意:求b^p % m之后的结果 题解:快速幂模板 代码: #include<iostream& ...

  4. transport error 202: bind failed: Address already in use

    background: I have terminated some test debugger without properly saying goodbye. the JDWP didn't cl ...

  5. python的magic methods

    https://pycoders-weekly-chinese.readthedocs.io/en/latest/issue6/a-guide-to-pythons-magic-methods.htm ...

  6. cdn 的配置及原理

    CDN概况 CDN的全称是Content Delivery Network,即内容分发网络. CND加速主要是加速静态资源,如网站上面上传的图片.媒体,以及引入的一些Js.css等文件. CND加速需 ...

  7. layui中load具体用法

    遮盖窗体,demo: layer.load(,{ // content: "加载中...", shade: [0.4,'#000'], //0.1透明度的白色背景 time:* } ...

  8. 二分法的应用：POJ1064 Cable master

    /* POJ1064 Cable master 时间限制: 1000MS 内存限制: 10000K 提交总数: 58217 接受: 12146 描述 Wonderland的居民已经决定举办地区性编程比 ...

  9. JAVA jar命令（一）-jar打包class文件

    jar包本质上是将所有class文件.资源文件压缩打成一个包(也可以选择不压缩),可选择在jar包中生成META-INF/MANIFEST.MF文件,MANIFEST.MF是清单文件,里面可以记录主类 ...

  10. delphi JPG转为BMP存入数据库

    delphi  JPG转为BMP存入数据库   必须在uses中引用JPEG procedure TForm1.BitBtn3Click(Sender: TObject);varjpg:TJPEGim ...