Vertical buttons in horizontal nav menu

Question

i'm trying to have vertical buttons (text from down to up) in a horizontal nav. Can anyone help me? I read something about "transform: rotate" but I don't know where to put it..

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>

CSS

#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;
}

Answer 1

From : w3schools (http://www.w3schools.com/css/css3_2dtransforms.asp)

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

Never tried to use this, I usually use javascript to rotate my elements but it appears to be what you looking for (I think you want to do this only in css/html).

You can apply this directly on #menu nav ul li I think!

If it doesn't work, can you provide a JSFiddle (or sort of)?

Update 1

Ok sorry I didn't analyse your entire code, I thought you were only looking for "rotation"!

First of all, for

blue buttons from left to right

You have to use a propriety name float to do this job, then clean with clear. I recommend you to practice this with some tutorial, it's very important in CSS Positioning and it will help you a lot here (and for future i guess)! Actually I did it in the JSFiddle linked but I think you absolutely need to be friendly with float and clear (@petebolduc supposed you to use float/clear too!)

Secondly for

with the text from bottom to top

Here you can use CSS3 2D Transforms. You have to applied a 270° rotation on your text for it be bottom to top. As I supposed in the first answer, you have to applied it on #menu nav ul li.

Here is the JSFiddle updated. I did not change your width/height property because I am not sure what you want to do after, but consider adapt them! (With your actual values, <li> are out of <header> and this is not what you want, I suppose). If you need help to width and height, then ask for!

I think it can be a good tutorial for positioning : http://www.barelyfitz.com/screencast/html-training/css/positioning/ (I am french so I usually follow french tutorial..)

And the JSFidle : http://jsfiddle.net/B4SEx/1/

Hope it helped you