css - 带有垂直子菜单的水平菜单

Question

我想知道是否有一种方法可以使用水平文本垂直子菜单和垂直文本来创建水平 css 菜单。我试过了，但是在旋转第二个 ul(对于垂直)时对齐会崩溃。我还希望菜单向左流动，直到我最后一个垂直菜单。这可以做到吗？请帮忙。

<style>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#table-header {
    float: left;
    width: 8%;
}
.vertical-list-container {
    float: left;
    width: 90%;
}
.vertical-list{
    float: left;
    width: auto;
}
.vertical-list-trans{
    float: left;
    border-left:1px solid green;
    border-right:1px solid red;
    border-top:1px solid blue;
    border-bottom:1px solid black;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="vertical-list-container">
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>1</li>
        <li>John Doe</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
    <ul class="vertical-list-trans">
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
        <li>123 Address Lane</li>
        <li>2</li>
        <li>Jane Doe</li>
        <li>456 Another Road456 Another Road456 Another Road</li>
    </ul>
</div>

Answer 1

来自CSS Transforms > Transform Rendering Model w3.org 上的规范:

In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning.

请参阅此代码笔: http://codepen.io/keithwyland/pen/evFof

注意 div 的流是如何没有改变的，即使红色的被改变了。那个红色 div 的高度仍然在内容流中并将绿色 div 向下推，就好像它没有被转换一样。这正是 transfrom 在规范中定义的工作方式。

这就是为什么当您旋转导航项时，对齐显示不正确的原因。它们似乎不再相互缠绕在一起，但实际上按照流程，它们是缠绕在一起的。

这是另一个例子: http://codepen.io/keithwyland/pen/DKLHi

注意在这个例子中绿色 div 是如何漂浮在红色 div 的流动位置旁边，而不是它被转换的右边缘。