vertically oriented menu

[Buppy]

Hello,

I am looking to make a vertically oriented CSS/HTML menu. Basically it's using lists:

<div id="menu">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>    
  </ul>
</div>

I get them on the same line using ul list-style:none; and li display: inline; properties. The problem is here - i have to rotate it by 90 degrees, so it stands vertically.
At this moment i should have a menu like this - - - - , however, the containing div is too narrow, so it still looks like this
-
-
-
-

I used on the ul element this:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

It does the rotation, however, they still appear under each other, just rotated, like this: | | | |
I need them to be like this, even in the narrow div:
|
|
|
|

I cannot increase the width of the div, is there a way to make them flow over the edge of the div, so they rotate properly? Perhaps there is a better way to get a vertically oriented menu?

Thanks

[Buppy]

Ok, now i'm trying without list elements and rotate each div separately. However here's the next issue: on IE each link appears nicely at the edge, like this:
|
|
|
|

however, on firefox, chrome, etc, they behave strangely, somewhat like they're in the center of the div and have strange alignment issues.

Any help would be nice.

Thanks

[almostbob]

Stu Nichols would be the site to visit, " flyout vertical css menu ", he's made a bunch of css menus that do as you wish, and just work as styled UL, if this one isnt right, there will be one on the site that is pretty close

the google search would be something like THIS