在CSS中垂直显示内联列表

Question

我有一个菜单，我正在尝试为我的网页制作它会跑到它的右侧，我希望它是垂直的，但是我遇到麻烦让文本在它上升时对齐下。我真的没有取得任何进展，但它是旋转CSS等：

#rightmenu {
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width:30px;height:578px;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
    float:right;
    margin-top:-554px;
}
    #rightmenu p {

    }
    #rightmenu ul {
        width:30px;
        height:20px;
        -ms-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -o-transform:rotate(90deg);
        font: 18px normal, sans-serif;
        list-style-type:none;
        padding:0;

    }
    #rightmenu li {
        display:inline;

    }

以下是网页的外观：

我希望'Home'按原样旋转，但要列在列表中。所以它会像现在一样从网页的顶部开始，但不是文本在它下面，而是它是正确的。问我是否需要澄清，我有麻烦解释。

Answer 1

你的CSS几乎是正确的。我将轮换从ul移动到li元素并更改了一些边距/填充。

你走了：

#rightmenu {
    float:right;
}

#rightmenu ul {
    list-style-type:none;
    border: 1px solid #000;
}

#rightmenu li {
    display:block;
    padding: 20px 0px;

    -ms-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}

您可以在此处看到它：http://jsfiddle.net/A3WaD/2/

<强>更新
修复了JS Fiddle，它没有使用工作解决方案进行更新