Вертикальные кнопки в горизонтальном навигационном меню

От: 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);
}

Никогда не пытались использовать это, я обычно использую javascript для вращения моих элементов, но, похоже, это то, что вы ищете (я думаю, вы хотите сделать это только в css/html).

Вы можете применить это прямо на #menu nav ul li Я думаю!

Если это не сработает, можете ли вы предоставить JSFiddle (или вроде)?

Обновление 1

Хорошо, жаль, что я не проанализировал весь ваш код, я думал, что вы ищете только "поворот"!

Прежде всего, для

синие кнопки слева направо

Вы должны использовать имя уместности float, чтобы сделать эту работу, а затем чистой clear. Я рекомендую вам практиковать это с помощью некоторого учебника, это очень важно в CSS Positioning, и это поможет вам многое здесь (и на будущее, я думаю)! На самом деле я сделал это в JSFiddle, но я думаю, что вам абсолютно необходимо быть дружелюбным с float и clear (@petebolduc предположил, что вы также используете float/clear!)

Во-вторых, для

с текстом снизу вверх

Здесь вы можете использовать 2D-преобразования CSS3. Вы должны применить поворот на 270 ° в тексте, чтобы он был внизу. Как я и предполагал в первом ответе, вы должны применить его на #menu nav ul li.

Здесь обновлен JSFiddle. Я не изменил свойство width/height, потому что не уверен, что вы хотите сделать, но подумайте об их адаптации! (С вашими фактическими значениями <li> находятся вне <header> и это не то, что вы хотите, я полагаю). Если вам нужна помощь по ширине и высоте, попросите !

Я думаю, что это может быть хороший учебник для позиционирования: http://www.barelyfitz.com/screencast/html-training/css/positioning/ (я французский, поэтому я обычно следую французскому учебнику..)

И JSFidle: http://jsfiddle.net/B4SEx/1/

Надеюсь, это помогло вам