纯css3实现的竖形无限级导航


Posted in HTML / CSS onDecember 10, 2014

之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形无限级导航。这款导航菜单可以是无限级。一起看下效果图:

纯css3实现的竖形无限级导航

实现的代码。

html代码:

复制代码
代码如下:

<div style="width: 700px; margin: auto;">
<div class="W1-h16">
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li class="has-sub"><a href="#">Submenu 1.1</a>
<ul>
<li><a href="#">Submenu 1.1.1</a></li>
<li class="has-sub"><a href="#">Submenu 1.1.2</a>
<ul>
<li><a href="#">Submenu 1.1.2.1</a></li>
<li><a href="#">Submenu 1.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Submenu 1.2</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
</ul>
</li>
</ul>
</div>
</div>

css3代码:

复制代码
代码如下:

.W1-h16 {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
.W1-h16 ul,
.W1-h16 ul li,
.W1-h16 ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.W1-h16 ul {
position: relative;
z-index: 500;
float: left;
}
.W1-h16 ul li {
float: left;
min-height: 0.05em;
line-height: 1em;
vertical-align: middle;
position: relative;
}
.W1-h16 ul li.hover,
.W1-h16 ul li:hover {
position: relative;
z-index: 510;
cursor: default;
}
.W1-h16 ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 520;
width: 100%;
}
.W1-h16 ul ul li {
float: none;
}
.W1-h16 ul ul ul {
top: 0;
right: 0;
}
.W1-h16 ul li:hover > ul {
visibility: visible;
}
.W1-h16 ul ul {
top: 0;
left: 99%;
}
.W1-h16 ul li {
float: none;
}
.W1-h16 ul ul {
margin-top: 0.05em;
}
.W1-h16 {
width: 13em;
background: #333333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
}
.W1-h16:before {
content: '';
display: block;
}
.W1-h16:after {
content: '';
display: table;
clear: both;
}
.W1-h16 a {
display: block;
padding: 1em 1.3em;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.W1-h16 > ul {
width: 13em;
}
.W1-h16 ul ul {
width: 13em;
}
.W1-h16 > ul > li > a {
border-right: 0.3em solid #1b9bff;
color: #ffffff;
}
.W1-h16 > ul > li > a:hover {
color: #ffffff;
}
.W1-h16 > ul > li a:hover,
.W1-h16 > ul > li:hover a {
background: #1b9bff;
}
.W1-h16 li {
position: relative;
}
.W1-h16 ul li.has-sub > a:after {
content: '»';
position: absolute;
right: 1em;
}
.W1-h16 ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.W1-h16 ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
.W1-h16 ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.W1-h16 ul ul {
border: 1px solid #0082e7;
}
.W1-h16 ul ul a {
color: #ffffff;
}
.W1-h16 ul ul a:hover {
color: #ffffff;
}
.W1-h16 ul ul li {
border-bottom: 1px solid #0082e7;
}
.W1-h16 ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
.W1-h16.align-right > ul > li > a {
border-left: 0.3em solid #1b9bff;
border-right: none;
}
.W1-h16.align-right {
float: right;
}
.W1-h16.align-right li {
text-align: right;
}
.W1-h16.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.W1-h16.align-right ul li.has-sub > a:after {
content: none;
}
.W1-h16.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
.W1-h16.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.W1-h16.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.W1-h16.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

效果非常的棒,这里推荐给大家。有问题也请及时反馈

HTML / CSS 相关文章推荐
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 #HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 #HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 #HTML / CSS
css3的transform中scale缩放详解
Dec 08 #HTML / CSS
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
斯福泰克软件测试面试题
2015/02/16 面试题
服务质量承诺书
2014/03/27 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
社区健康教育工作方案
2014/06/03 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书