纯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;
}

本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/12312

时间: 2024-10-09 22:18:13

纯css3实现的竖形二级导航的相关文章

一款纯css3实现的竖形二级导航的实例教程

之前为大家分享了好多导航菜单.今天给大家带来一款纯css3实现的竖形二级导航.这款导航菜单可以是无限级.一起看下效果图: 实现的代码. html代码: XML/HTML Code复制内容到剪贴板 <div style="width: 700px; margin: auto;"> <div class="W1-h16"> <ul> <li class="has-sub"><a href=&quo

纯CSS3实现宽屏二级下拉菜单

今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Javascript,展示速度当然是非常快的. 在线预览   源码下载

一款简洁的纯css3代码实现的动画导航

之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class=&qu

一款基于jquery和css3的响应式二级导航菜单

今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>

纯CSS3编写的面包屑导航收集

整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导航 查看网站 CSS面包屑导航 查看网站 CSS3面包屑导航制作教程 查看网站 黄色的CSS Breadcrumbs教程 查看网站 CSS3 Breadcrumbs 查看网站 扁平化风格面包屑制作教程 查看网站 CSS 面包屑菜单制作方法 查看网站 五个不同风格的面包屑导航CSS制作教程 查看网站

一款纯css3实现的响应式导航

之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <div class="navbar"> <a class="brand" href="#"> <img src="logo.png" /></a> <!--MOBILE--> &l

纯css3实现的幽灵按钮导航

之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览   源码下载 实现代码: html代码: <header> <nav> <a>Home</a> <a>Words</a> <a>Activity</a> <a>Discussion</a> <a>Immersi

css3实现二级导航

在上篇 css3 手风琴效果中得到灵感,通过简单css实现二级导航效果 首先页面结构还是通过无需列表嵌套来实现 <nav> <ul class='clearfix'> <li class="menu">item1 <ul class='subMenu'> <li>subItem1</li> <li>subItem2</li> <li>subItem3</li> <

一款纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="main-menu"> <li class="main-menu-item active"><a href="#">Home</a></li><li class="m