SOURCE

<div class="nav_left">
  <ul class="nav_left_box">
    <li>
      <a href="#">
        左侧栏1
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏2
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏3
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏4
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏5
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏6
      </a>
    </li>
    <li>
      <a href="#">
        左侧栏7
      </a>
    </li>
  </ul>
</div>

li {
  text-decoration: none;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style: none;
}

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

.nav_left {
  height: 100%;
  width: 60px;
  /*	position:absolute;*/
  /*页面中单独使用时，需取消注释*/
  top: 220px;
  /*页面中单独使用时，需更改*/
  left: 0;
  height: 260px;
  /*页面中单独使用时，需注释*/
  display: block;
}

.nav_left_box {
  width: 60px;
  /*position: fixed;*/
  /*页面中单独使用时，需取消注释*/
  /*	margin-top: 230px;*/
  /*页面中单独使用时，需取消注释*/
}

.nav_left_box a {
  display: block;
  width: 60px;
  height: 36px;
  border-radius: 0 3px 3px 0;
  background: #009bdb;
  margin-top: 1px;
  color: #fff;
  line-height: 36px;
  text-align: center;
}

.nav_left_box a:hover {
  background: #00cc44;
  color: #000;
  width: 76px;
}