jquery - 歪んだテキストなしで歪んだメニュー項目を実現しようとしています。近づいたが、第2層のアイテムが奇妙にカスケードしている

Question

「 」を使用transformしてアイテムを歪めli、次に s で反対の変換を使用spanしてテキストをまっすぐにしました。

仕事で使用しなければならない CMS が自動的にメニューを作成するため、jQuery を使用してテキストの周りに s を追加する必要があったため、HTML 内にspanクラスや s を追加することはできません。span

目的の達成に近づいていますが、何らかの理由でドロップダウン メニュー項目がカスケードしています。

どうすればこれを修正できますか?

これが私がやったことです：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;
}