CSS skew issue - child elements skewing despite opposite skew added

I’m trying to get a skewed nav, but the links are skewing with the nav. I understand the code should work if it’s like this:

#nav { transform: skew(-15deg); }
#nav li { transform: skew(15deg); }

But that’s not working. Here’s a fiddle: http://jsfiddle.net/U5mq5/

Again, I want my nav li a to be straight, not slanted. Help?


CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Therefore the display of the elements should be changed from inline to inline-block in order for skew() to work. In addition, I added white-space: nowrap in order to prevent the text from wrapping to a new line.


#nav ul li {
  display: inline-block;
  padding: 0 0 0 3.5%;
  transform: skew(15deg);
  -webkit-transform: skew(15deg);
  white-space: nowrap;