Trying to achieve skewed menu items without skewed text. Came close but 2nd tier items are cascading strangely

Trying to achieve skewed menu items without skewed text. Came close but
2nd tier items are cascading strangely

I used 'transform' to skew the li items, then opposite transform on the
spans to straighten out the text.
I had to use jQuery to add the spans around the text because the CMS I
have to use at work automatically creates the menu, so I can't add any
classes or spans within the HTML.
I have come close to achieving what I want, but the drop down menu items
are cascading for some reason.
How can I fix this?
Here is what I've done: http://jsfiddle.net/y5w8m/1/
<div id="menu">
<ul id="nav">
<li class="current first"><a href="#"><span>Home</span></a>
<ul>
<li><a href="#"><span>drop 1</span></a>
<ul>
<li><a href="#"><span>drop 2</span></a></li>
<li><a href="#"><span>drop 2</span></a></li>
</ul>
</li>
<li><a href="#"><span>drop 1</span></a></li>
<li><a href="#"><span>drop 1</span></a></li>
<li><a href="#"><span>drop 1</span></a></li>
</ul>
</li>
<li><a href="#"><span>Services</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a>
<ul>
<li><a href="#"><span>drop 2</span></a></li>
<li><a href="#"><span>drop 2</span></a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* Main Navigation */
#menu {
background: #528aaf;
position: relative;
margin-top: 5px;
z-index: 400;
}
ul#nav {
margin: 0;
padding: 0;
width: auto;
}
ul#nav > li {
float: left;
padding: 0;
list-style: none;
list-style-image: none;
display: inline-block;
position: relative;
transform: skew(-25deg);
-webkit-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-ms-transform: skew(-25deg);
-o-transform: skew(-25deg);
}
ul#nav li a {
background: none repeat scroll 0 0 #2D5B79;
color: #FFFFFF;
display: block;
font-family: Arial;
font-size: 11px;
line-height: 32px;
padding: 0 35px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
ul#nav li a span {
transform: skew(25deg);
-webkit-transform: skew(25deg);
-moz-transform: skew(25deg);
-ms-transform: skew(25deg);
-o-transform: skew(25deg);
display:block;
}
ul#nav li.current a,
ul#nav li a:hover {
background: #c68c67;
}
ul#nav li ul { /* second-level lists */
position: absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because
display: none isnt read by screen readers */
margin: 0px;
padding: 0px;
}
ul#nav li ul li a,
ul#nav li.current ul li a {
background: #2F2F2F;
border-bottom: 1px solid #666;
color: #fff;
font-size: 12px;
line-height: 1.3;
padding: 7px 10px;
transform: skew(25deg);
-webkit-transform: skew(25deg);
-moz-transform: skew(25deg);
-ms-transform: skew(25deg);
-o-transform: skew(25deg);
display:block;
}
ul#nav li ul li,
ul#nav li ul li span {
transform: skew(0deg);
-webkit-transform: skew(0deg);
-moz-transform: skew(0deg);
-ms-transform: skew(0deg);
-o-transform: skew(0deg);
display:block;
}
ul#nav li ul li a:hover,
ul#nav li.current ul li a:hover,
ul#nav li ul li.current a { /* second level dropdown button hover state */
background: #c68c67;
color: #fff;
}
ul#nav li ul li ul {
margin: -30px 0 0 220px;
}
ul#nav li:hover ul li ul,
ul#nav li:hover ul li ul li ul,
ul#nav li.sfhover ul li ul,
ul#nav li.sfhover ul li ul li ul {
left: -999em;
}
ul#nav li:hover ul,
ul#nav li ul li:hover ul,
ul#nav li ul li ul li:hover ul,
ul#nav li.sfhover ul,
ul#nav li ul li.sfhover ul,
ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list
items */
left: auto;
}