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

P.S。对不起语法错误。

Answer 1

您可以使用white-space : nowrap来实现此目的，例如

.contextMenu li {
    white-space:nowrap;
}

检查小提琴：
http://jsfiddle.net/7qV2H/2/

Answer 2

试试这个

.contextMenu li span {
    float: none;
}

.contextMenu li ul {
    white-space:nowrap;
}

DEMO

元素宽度（位置：绝对）元素内部（位置：相对）

2 个答案: