之前为大家分享了好多导航菜单。今天给大家带来一款纯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>
css3代码:
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
-
-
-
CSS中的四种定位区别详解
我们都知道,前端开发里面的css中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和...
[阅读全文]
-
-
-
-
网友评论