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

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

从w3.org上的CSS Transforms> Transform Rendering Model规范中：

在HTML名称空间中，transform属性不会影响转换元素周围的内容流。 但是，溢出区域的范围将转换后的元素考虑在内。 此行为类似于通过相对位置偏移元素时发生的情况。

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

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

这就是为什么当您旋转导航项目时，对齐方式会消失的原因。 它们似乎不再相互缠绕，但实际上按照流程，它们确实可以缠绕。

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

请注意，在此示例中，绿色div如何漂浮在红色div的流向旁边，而不是在其变形方式的右边缘。

Answer 2

我不太确定问题出在哪里，但是从标题来看，我想您正在寻找带有垂直“子菜单”的水平“菜单”。

您将需要使用transform-origin: top left; 伴随着transform: rotate(90deg); 然后摆弄定位position:absolute; top:--px; left:--px; position:absolute; top:--px; left:--px; 在您的“子菜单”上

有点难以解释，有关工作示例，请参见jsfiddle。

jsFiddle