尝试在没有扭曲文本的情况下实现扭曲的菜单项.虽然很接近，但第二层项目却奇怪地层叠在一起

Question

我使用"transform"来扭曲li项，然后对span进行反向变换来拉直文本。

我不得不使用jQuery在文本周围添加spans，因为我在工作中必须使用的CMS会自动创建菜单，所以我不能在HTML中添加任何类或spans。

我已经接近实现我想要的，但由于某种原因，下拉菜单项正在级联。

我该怎么解决这个问题？

以下是我所做的：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;
}

Answer 1

这是您想要实现的吗（下拉列表的定位可能需要一些调整）？http://jsfiddle.net/jzKHD/

顶级项目上的偏斜也会影响下拉ul的边界——然后你会"取消拖动"每个下拉li，而实际上你应该取消拖动整个ul:

ul#nav li ul { /* second-level lists */
    border: 1px solid black;
    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;
    /* This transform was moved here from the next rule */
    -webkit-transform: skew(25deg);
    -moz-transform: skew(25deg);
    -ms-transform: skew(25deg);
    -o-transform: skew(25deg);
    transform: skew(25deg);
}   
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;
    display:block;
    /* The transform in the previous rule was originally here */
}

---

编辑：要使其与第三级导航正确工作，请将转换移动到只影响第一个下拉菜单的单独规则中（使用子选择器）。因此，上面的一组样式看起来是这样的：

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;
}
/* This rule will only affect the first drop down, and be ignored by subsequent ones. */
ul#nav > li > ul {
    -webkit-transform: skew(25deg);
    -moz-transform: skew(25deg);
    -ms-transform: skew(25deg);
    -o-transform: skew(25deg);
    transform: skew(25deg);
}
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;
    display:block;
}

Fiddle here：http://jsfiddle.net/ns832/（同样，我忽略了间距问题，希望它们足够容易修复。）