ul {
  height: 100px;
  overflow: hidden;
}

ul li {
  vertical-align: bottom;
}

ul li {
  display: inline-block;
}

ul li a {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 30px;
  margin-right: -18px;
  color: #eee;
  font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
  text-decoration: none;
}

ul li a.last {
  height: 100px;
}

ul li.hidden {
  visibility: hidden;
}

ul li a.active,
ul li a:hover {
  height: 35px;
}

ul li a.active {
  height: 40px;
  z-index: 10;
}

ul li a.active span.left,
ul li a:hover span.left {
  background: url(../img/left.png) no-repeat top left;
}

ul li a.active span.right,
ul li a:hover span.right {
  background: url(../img/right.png) repeat-x top right;
}

span.left {
  padding: 10px 13px 0 0;
  display: inline-block;
  height: 100%;
  width: 5px;
  background:  url(../img/left_d.png) no-repeat top left;
}

span.right {
  display: inline-block;
  padding: 10px 40px 0 25px;
  height: 100%;
  background: url(../img/right_d.png) repeat-x top right;
}