纯css制作三级菜单
<!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制作三级菜单的更多相关文章
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 纯CSS二级纵向菜单
纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
随机推荐
- ajax 重复提交
1.一次点击事件触发两次请求,找到的原因是重复引用了同一个.js文件,后台返回来的数据是个页面,在这个页面里面又引用了.js,所以导致一次点击多次请求
- vbs 之 wscript
https://www.jb51.net/article/20919.htm '''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ' ...
- 2019杭电多校第三场hdu6606 Distribution of books(二分答案+dp+权值线段树)
Distribution of books 题目传送门 解题思路 求最大值的最小值,可以想到用二分答案. 对于二分出的每个mid,要找到是否存在前缀可以份为小于等于mid的k份.先求出这n个数的前缀和 ...
- POJ3630-Phone List-Trie字典树模板题
Given a list of phone numbers, determine if it is consistent in the sense that no number is the pref ...
- CM集群管理
用CM装完cdh 版本后,将不同机架的服务器已经认为拆掉网线,但是主机管理那边还是显示已经下载的服务器存在. 如图: 该怎么配置 node8 和node9会自动消失: DataNode已经显示 ...
- [已解决]报错This event loop is already running
安装nest_asyncio pip install nest_asyncio 导入并调用 import nest_asyncio nest_asyncio.apply()
- C# ASCII码和英文字母相互转换和ASCII码对照表
1.字母转换成ASCII码 string str = "hello"; ]; array = System.Text.Encoding.ASCII.GetBytes(str); / ...
- flink on yarn启动失败
我启动hadoop on yarn 集群后 [root@node1 flink-1.6.1]# ./bin/yarn-session.sh -n 2 -jm 1024 -tm 1024 报的如下错误 ...
- python代码{v: k for k, v in myArray.items()}是什么意思?
最近在扒vnpy的源码总能看到{v: k for k, v in ORDERTYPE_VT2HUOBI.items()}这样的源码,就是不知道什么意思 然后万能的google找到了Quora的一个类似 ...
- SpringCloud服务消费有哪几种方式?
一.使用LoadBalancerClient LoadBalancerClient接口的命名中,可以看出这是一个负载均衡客户端的抽象定义,spring提供了一个实现 org.springframewo ...