前端组件从零之垂直导航栏

今天继续组件文章的分享。结合上一次讲到的水平导航栏，今天就讲讲垂直导航栏。其实原理和水平导航栏原理其实差不多类似，那么就来谈谈。
说到垂直导航栏，用到最多的地方就是电商网页，特别像淘宝，天猫，京东，苏宁这些网站都有垂直导航栏。垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。这里结合天猫的垂直导航栏来说说垂直导航栏如何写完成。

首先肯定需要一个最外层的盒子来装载全部的内容。然后就是商品分类那一栏和下面的导航区。因为有的网页比较喜欢隐藏导航栏，然后通过滑动鼠标或者点击鼠标到商品导航栏。所以比较建议把商品分类和下面的导航区域分成两个不同的div装载。

第一步：先创建放载导航栏的div盒子

**
代码清单:html代码

<div id="nav1">
<div id="nav_tit">
 	<i class="iconfont icon-list"></i>
 	<div class="sort">商品分类</div>
</div>
<div id="nav2"></div>
</div>

清除并改变一下一些浏览器的默认样式

代码清单:css代码

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a,
img {
    border: 0;
}

body {
    line-height: 2em;
    background-color: #ffffff;
    font-family: arial, helvetica, sans-serif;
    color: #666666;
    font-size: 12px;
    background-color: lightblue;
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    color: #cd0606;
}

第二步：创建一级垂直导航

有了盒子,那么就来做垂直导航部分。当然最好就是使用ul和li啦。那么就以一个li为例，分析一下垂直导航栏中有什么结