jquery - Rhombus div menu

Question

I'm trying to create a Rhombus style links menu which goes horizontal across the page. I will also have some java script drop downs on this.Something like this: \ \ \ \ \

I am using the skew css3 attributes on the divs but they skew the the text as well is there a way to un-skew the text in the div? ive tried a div in a div but no luck. And how can i get this to work in 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);
}

Many thanks

Answer 1

Your code works. I copied your code and checked it with firebug and found something strange...

Replace your CSS with this.

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