CSS Drop Down Menu size change dynamically depending on content?

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?

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:

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