CSS Drop Down Menu size change dynamically depending on content?

Question

How is it possible to make a drop down menu's width change depending on the width of the content? I have a drop down menu showing two drop downs, one has small words so it has a set width, yet the other drop down has longer words so it's pushing my content down to the next line.

How can the width be automatically the size of whatever is inside the div?

Any help would be greatly appreciated.

Answer 1

This isn't possible using plain CSS. A Javascript library like jquery is usually used to manipulate the CSS attributes to achieve this.

Answer 2

CSS:

.relativeWrap { width:30%; position:relative; }
.stickyWrap { position:relative; left:0; right:0; }
.dropDown { width:100%; }

HTML:

<div class="relativeWrap">
    <div class="stickyWrap">
        <select class="dropDown">
            <option>Lorep ipsum</option>
            <option>Lorep ipsum</option>
            <option>Lorep ipsum</option>
        </select>
    </div>
    <div>Content</div>
</div>

Update:

CSS:

.relativeWrap { width:30%; position:relative; }
.stickyWrap { position:relative; left:0; right:0; }
.dropDown { width:100%; background:yellow; border:1px solid black; }

HTML:

<div class="relativeWrap">
    <div class="stickyWrap">
        <ul class="dropDown">
            <li>
                Lorep ipsum
                <ul>
                    <li>Ipsum lorem</li>
                    <li>Ipsum lorem</li>
                    <li>Ipsum lorem</li>
                </ul>
            </li>
            <li>Lorep ipsum</li>
            <li>Lorep ipsum</li>
        </ul>
    </div>
    <div>Content</div>
</div>

Preview: