Vertical menu with vertical text

I need a vertical menu with vertical text in it.

Here is the link to working example:

http://jsfiddle.net/cyxuD/4/embedded/result/

You can edit it on jsfiddle site.

How to make it work in Firefox and IE?

Html:

<ul>
    <li><a href="#TabStrip-1">Text 1</a></li>
    <li><a href="#TabStrip-2">Text 2</a></li>
    <li><a href="#TabStrip-3">Very l开发者_StackOverflow社区ong text...</a></li>
</ul>

---

Vertical text? Like this:

V
e
r
t
i
c
a
l
?

I recently altered sIFR font replacement to do that for me and it worked quite well - if Flash and Javascript are acceptable in your case?

---

Interesting css trick. I tested in my firefox, the menu is vertical and so the text, but it looks the position mess up.

after my survey, I found that when the "li" element rotates, the axis is at the middle of it, neither left side nor right side. So that is the reason why position mess up, because before rotation, the "li" elements align left but their width are different.

I rewrite some of your css and now the position looks better, but I think it's not the best practice.

ul
{
  float: left;         
  list-style: none;   
  padding: 0;
  margin-left: 40px;     
}

li
{
  display: inline-block;
  margin-left: -85px;
  margin-top: 45px;
  width: 120px;
  border: 1px solid #A7BAC5;
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg);     
  -o-transform:rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);                 
}