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

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<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>

学习交流

如何查找有故障的配件

热门图片

猜你喜欢的新闻

猜你喜欢的关注