CODEWITHSUNDEEP
htmlcss
user3405682
user3405682

Reputation: 23

Width of element with (position: absolute) inside element with (position:relative)

Have problem that can be seen on jsFiddle.

How to fix submenu's width? Width of submenu elements must be dynamic.

Part of 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. Sorry for grammatical mistakes.

Upvotes: 0

Views: 56

Answers (2)

Dheeraj
Dheeraj

Reputation: 318

Try this

.contextMenu li span {
    float: none;
}

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

DEMO

Upvotes: 0

Arjun
Arjun

Reputation: 1439

you can use white-space : nowrap for achieve this, eg.

.contextMenu li {
    white-space:nowrap;
}

check out fiddle:
http://jsfiddle.net/7qV2H/2/

Upvotes: 1

Related Questions