</p>

<ul class="menu">
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a>
  <ul>
  <li><a class="documents" href="#">ссылки</a></li>
  <li><a class="messages" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  </ul>
  </li>
  <li><a href="#">Ссылка 3</a>
  <ul>
  <li><a class="documents" href="#">ссылки</a></li>
  <li><a class="messages" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  </ul>
  </li>
  <li><a href="#">Ссылка 4</a>
  <ul>
  <li><a class="documents" href="#">ссылки</a></li>
  <li><a class="messages" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  <li><a class="signout" href="#">ссылки</a></li>
  </ul>
  </li>
  <li><a href="#">Ссылка 5</a></li>
  <li><a href="#">Ссылка 6</a></li>
</ul>

<p>

/* Основное */
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Редактор меню */
.menu {
display:block;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
/* Редактор ссылок */
.menu li a {
display: inline-block;  
margin-top: 10px; margin-bottom: 10px;  
margin-left: 3px; margin-right: 3px;
padding: 5px;  
padding-left: 10px; padding-right: 10px;  
background: #252322;  
border: 1px solid #433E38;  
-webkit-transform: skew(-30deg); /* Угол наклона, если убрать минус (-), то наклон будет в другую сторону.*/  
-moz-transform: skew(-30deg);  
-o-transform: skew(-30deg);  
transform: skew(-30deg);
font-size: 20px;  
font-family: bold "OpenSans";  
color: #fff;  
text-transform: uppercase;  
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #c9c9c9;
text-decoration: none;
}
/* Редактор для Sub-меню */
.menu ul {
position: absolute;
top: 45px;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}