Боюсь, я совсем не знаю, как это объяснить, и я не могу это показать. Итак, я настроилэто скрипка.

Как видите, навигационное меню не там, где должно быть. Он должен быть установлен точно на нижней границе элемента головы и на левой границе. То естьbottom: 0 а такжеleft: 0, Тем не менее, я устанавливаю поворот на -90 градусов, и очевидно, что абсолютное позиционирование наnav элемент происходит перед вращением или, скорее, на исходном элементе, как если бы вращение не существовало.

Я пытался использовать:before а также:after псевдоэлементы, чтобы попытаться решить, смогу ли я решить это таким образом. Но я не могу понять эти псевдоэлементы. В обоих случаях вращение было обойдено. (Без вращенияnav элемент явно позиционирует себя там, где и должен быть.)

Это в основном код:

<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>

Ничего фантастического.

И это CSS (части, которые имеют значение для этой проблемы):

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

Как это работает:Вы можете увидеть это в проекте Fiddle.

Надеюсь, кто-то там может мне помочь.

P.S, Кроме того, иногда и в зависимости от размера текста внутри<a> теги, кажется, расстояние между вертикальными элементами вnav являетсянемного увеличено, как будто в половине пикселя, что означает, что границы становятся размытыми.Вы можете увидеть это в этой другой версии всего 4 символа и пробел в одном из<a> элементы. Не могу понять, почему это будет иметь значение. Однако, когда это происходит, меню выглядит довольно плохо!