CODEWITHSUNDEEP
jquerycss
Monty
Monty

Reputation: 1322

Do not allow the parent div to expand when hidden child div is shown

I'm making a little menu and I'm trying to figure out how to NOT have the parent div expand when the child gets un-hidden.

In the example below, notice when you mouseover the MENUS the catItemWrapper div gets shown. Numbers 1 & 3 are fine, but when you mouseover the MENU TWO it expands the top div as inside one of the menu items has more text.

I'm trying to figure out how to not have the catWrapper div expand with the catItemWrapper div.

http://jsfiddle.net/vyyNW/

What am I not doing?

Upvotes: 1

Views: 182

Answers (3)

Travis J
Travis J

Reputation: 82297

jsFiddle Demo

Allowing the element which stretches the parent to be positioned absolutely will remove it from the page flow and as a result prevent it from resizing the parent.

Set the catitemwrapper to be position:absolute;. Doing this makes the margin-left on the catitem show, so you should remove it.

.catItemWrapper { position: absolute; }

Upvotes: 2

Chad
Chad

Reputation: 5428

You want to give your sub-item wrapper (.catItemWrapper') an absolute positioning. You can see it at http://jsfiddle.net/vyyNW/2/. This can be easily done with purely CSS, too. Try using something like below for simpler, cleaner code.

HTML:

<ul>
    <li>
        1
        <ul>
            <li>1.1</li>
            <li>1.2</li>
        </ul>
    </li>
    <li>
        2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>
        3
        <ul>
            <li>3.1</li>
            <li>3.2</li>
        </ul>
    </li>
</ul>

And CSS:

ul, li { list-style: none; margin: 0; padding: 0; }
ul li { display: inline-block; position: relative; width: 100px; }
ul ul { display: none; position: absolute; left: 0; }
ul li:hover ul { display: block; }

Check it out. http://jsfiddle.net/Y7dZj/

Upvotes: 0

j08691
j08691

Reputation: 207963

Change your .catWrapper rules by adding position:relative and add a new rule for catItemWrapper

.catWrapper {
    float: left;
    margin: 5px 10px 5px 10px;
    position:relative;
}
.catItemWrapper{
    position:absolute;
}

jsFiddle example

Upvotes: 1

Related Questions