CSS skew issue - child elements skewing despite opposite skew added

Question

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?

Answer 1

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.

UPDATED EXAMPLE HERE

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