Semantic dropdown 100% width?

Question

http://jsfiddle.net/gL1xynzr/

How can I make the menu that drops down have:

width: 100%;
max-width: 440px;

I plan to have 4 of these drop downs on one CSS table row so to fit horizontally on a mobile phone portrait view so a dropdown itself can't be 100% width, only the menu that drops down.

<div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

Answer 1

Try to use vieport width units

width: 100vw;
max-width: 440px;