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

どうもありがとう