Полу-прозрачное серое меню на CSS

<ul>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  <li><a href="Ссылочка">Название пунктика</a></li>  
  </ul>

li {  
  display: inline-block; /* Строчно-блочные элементы */  
  background:rgba(118,118,118,0.7); /* Цвет фона */  
  margin-right: -5px; /* Расстояние между пунктами меню */  
  -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */  
  -moz-transform: skewX(-30deg); /* Для Firefox */  
  -o-transform: skewX(-30deg); /* Для Opera */  
  -ms-transform: skewX(-30deg); /* Для IE */  
  transform: skewX(-30deg); /* CSS3 */  
  }  
  a {  
  color: #fff; /* Цвет ссылок */  
  display: block; /* Блочный элемент */  
  padding: 5px 15px; /* Поля вокруг текста */  
  text-decoration: none; /* Убираем подчёркивание */  
  -webkit-transform: skewX(30deg); /* Для Safari и Chrome */  
  -moz-transform: skewX(30deg); /* Для Firefox */  
  -o-transform: skewX(30deg); /* Для Opera */  
  -ms-transform: skewX(30deg); /* Для IE */  
  transform: skewX(30deg); /* CSS3 */  
  }  
  li:hover {  
  background: #333; /* Цвет фона при наведении курсора мыши */  
  }