html - 元素的宽度(位置 : absolute) inside element with (position:relative)

Question

有问题可以在 jsFiddle 上看到。

如何固定子菜单的宽度？子菜单元素的宽度必须是动态的。

部分CSS

.contextMenu, .contextMenu ul {
    margin: 0;
    padding: 2px 0;
    list-style-type: none;
    background: white;
    border: 1px solid #bababa;
    font-size: 13px;
    position: absolute;
}
.contextMenu li {
    /**...**/
    position: relative;
}
/**...**/
.contextMenu li ul {
    left: 100%;
    z-index: 1000;
    top: -3px;
    display: none;
}
.contextMenu li:hover ul {
    display: inline-block;
}
/**...**/

HTML

    <ul class="contextMenu">
    <li class="click_me">Some elemetn</li>
    <li class="stripe"></li>
    <li>
        Some 2
        <span>»</span>
        <ul><li class="click_me">Some 2.1</li></ul>
    </li>
    <li>
        Some 3
        <span>»</span>
        <ul>
            <li>
                some 3.1
                <span>»</span>
                <ul><li class="click_me">Some element 3.1.1</li></ul>
            </li>
        </ul>
    </li>
</ul>

jsFiddle example

附言抱歉有语法错误。

Answer 1

您可以使用 white-space : nowrap 来实现这一点， 例如。

.contextMenu li {
    white-space:nowrap;
}

查看 fiddle :
http://jsfiddle.net/7qV2H/2/