css实现树型结构网站地图特效

这个也算得上是一款非常逆天的作品，没有任何javascript或者jquery脚本参考，纯css样式代码实现，兼容所有浏览器，使用非常简单，既可当导航菜单使用，也可以当树型菜单使用，太棒了。。。

分类：导航菜单 > 多级菜单难易：初级

查看演示下载资源下载积分： 20 积分

首先引用文件

<link href="css/sitemap.css" rel="stylesheet" media="all">

css代码：

<ul>
        <li><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">jquery知识</span></span></span></span></span></a></li>
        <li><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">Div+css</span></span></span></span></span></a></li>
        <li class="sub-sub"><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">原生JavaScript</span></span></span></span></span></a>
          <!-- Third Level Start -->
          <ul>
            <li><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">javascript作品</span></span></span></span></span></a></li>
            <li><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">javascript文章</span></span></span></span></span></a></li>
            <li><a href="#"><span class="ro"><span class="lo"><span class="ru"><span class="lu"><span class="box-content">javascript视频教程</span></span></span></span></span></a></li>
          </ul>
        </li>
      </ul>