1

我使用 ' transform' 来倾斜li项目，然后在 s 上进行相反的变换span以理顺文本。

我不得不使用 jQueryspan在文本周围添加 s，因为我必须在工作中使用的 CMS 会自动创建菜单，因此我无法span在 HTML 中添加任何类或 s。

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

我怎样才能解决这个问题？

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

1 回答 1

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;
}

在这里摆弄：http: //jsfiddle.net/ns832/（同样，我忽略了间距问题，希望它们应该很容易修复。）

于 2013-08-21T02:17:15.090 回答