CSS “transform: rotate ()” afetando o design geral com “position: absolute” (não alinhando corretamente)

Eu temo que eu não saiba como explicar isso, assim como posso mostrar. Então eu configureieste violino.

Como você pode ver, o menu de navegação não está onde deveria estar. Ele deve ser definido exatamente na borda inferior do elemento head e na borda esquerda. Ou sejabottom: 0 eleft: 0. No entanto, estou definindo uma rotação de -90degs e é óbvio que o posicionamento absoluto nonav o elemento está acontecendo antes da rotação ou talvez no elemento original como se a rotação não existisse.

Eu tentei usar:before e:after pseudo-elementos para tentar ver se eu poderia resolvê-lo dessa maneira. Mas eu não consigo entender esses pseudo-elementos. Em ambos os casos, a rotação foi ignorada. (Sem a rotação, onav elemento obviamente se posiciona onde deveria estar.)

Este é basicamente o código:

<div id="head">
    <div id="title">My Web</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Something Else</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

Nada chique.

E este é o CSS (as partes dele que importam para este problema):

#head {
    position: relative;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}
nav a {
    display: inline-block;
    padding: 0 9px;
}

Como está funcionando?você pode ver isso no projeto Fiddle.

Espero que alguém possa me dar uma mão.

P.S. Além disso, às vezes, e dependendo do tamanho do texto dentro do<a> tags, parece, a distância entre os elementos verticais nonav élevemente aumentada, como se em meio pixel, significando que as bordas se tornam difusas.Você pode ver isso nesta outra versão com apenas mais 4 caracteres e um espaço em um dos<a> elementos. Não consigo entender por que isso faria diferença. No entanto, faz o menu parecer bastante ruim quando isso acontece!

questionAnswers(2)

yourAnswerToTheQuestion