jquery - 菱形 div 菜单

Question

我正在尝试创建一个横跨页面的菱形样式链接菜单。 我还会有一些 java 脚本下拉菜单。像这样的东西:\\\\

我在 div 上使用倾斜 css3 属性，但它们也会倾斜文本，有没有办法取消倾斜 div 中的文本？我在一个 div 中尝试了一个 div 但没有运气。我怎样才能让它在 ie7/8 中工作？

   <div id="menu">
                <div class="MenuOptions"><div class= "menuRot"><a>Menu</a></div></div>
                <div class="MenuOptions"></div>
                <div class="MenuOptions">Menu 3</div>
                <div class="MenuOptions">Menu 4</div>
                <div class="MenuOptions">Menu 5</div>
                <div class="MenuOptions">Menu 6</div>
   </div>

**CSS**

.MenuOptions{

    height:50px;
    width: 100px;
    float: left;
    position: relative;
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    border: 1px solid red;
    background-color: #d6dd31;
}​
.menuRot{
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
}

非常感谢

Answer 1

您的代码有效。我复制了你的代码并用 Firebug 检查了它，发现了一些奇怪的东西......

用这个替换你的 CSS。

.MenuOptions{

    height:50px;
    width: 100px;
    float: left;
    position: relative;
    transform: skew(35deg);
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    border: 1px solid red;
    background-color: #d6dd31;
}

.menuRot{
    transform: skew(-35deg);
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
}