纯纯css3实现的竖形无限级导航实现的竖形无限级导航
本文给大家介绍了一款非常漂亮的纯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代码: