Html 水平导航菜单中的垂直按钮

我尝试在水平导航中使用垂直按钮（文本从下到上）。有人能帮我吗？我读了一些关于“变换：旋转”的东西，但我不知道该放在哪里

HTML

<div id="menu">
<nav>
    <ul>
        <li><a href="#1">mission</a></li>
        <li><a href="#2">projects</a></li>
        <li><a href="#3">present</a></li>
    </ul>
</nav>

发件人：

我从来没有尝试过使用它，我通常使用javascript来旋转我的元素，但它似乎就是你想要的（我想你只想在css/html中这样做）

你可以直接在

#menu nav ul li

上应用它，我想

如果它不起作用，您能提供一个JSFiddle（或某种类型）吗

更新1 很抱歉，我没有分析你的全部代码，我以为你只是在寻找“旋转”

首先，为了

从左到右的蓝色按钮

您必须使用适当的名称

float

来执行此操作，然后使用

clear

进行清理。我建议你通过一些教程来练习这一点，这在CSS定位中非常重要，它将在这里对你有很大帮助（我想对未来也有很大帮助）！实际上，我是在JSFIDLE链接中做的，但我认为您绝对需要友好地使用浮动和清除（@petebolduc假设您也使用浮动/清除！）

其次是

文本从下到上

这里可以使用CSS3 2D变换。您必须在文本上应用270°旋转，才能使其从下至上。正如我在第一个答案中所想，您必须将其应用于

#菜单导航ul li

下面是更新的JSFIDLE。我没有改变你的宽度/高度属性，因为我不知道你想做什么之后，但考虑适应它们！（根据您的实际值，

超出了

，我想这不是您想要的）。如果您需要宽度和高度方面的帮助，请咨询

我认为这是一个很好的定位教程：（我是法国人，所以我通常遵循法语教程。）

而JSF空闲：

---

希望它能帮助你添加：float:left；要#menu nav ul li{}@petebolduc，它不起作用。每个按钮只有一行文本，所以它们怎么能“垂直列出”？我试过很多次使用它，但它似乎不起作用。。我从未使用过JSFIDLE，希望它能起作用。。（我需要从左到右的蓝色按钮，文本从下到上。

#menu
{
    border: 1px solid red;
    width: 1325px;
    height: 146px;
    margin: 0 auto;
}

#menu nav ul
{
    background-color: #093;
    list-style-type: none;
}

#menu nav ul li
{
    background-color: #00F;
    width: 146px;
    height: 42px;
    margin: 3px;
}

#menu nav a
{
    text-decoration: none;
}

/** CSS3 2D Transforms **/
.div{
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);
}