Fomantic-UI Sandbox

HTML

<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.css">
<div class="ui primary buttons">
  <div class="ui button">Add</div>
  <div class="ui floating dropdown icon button">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item" id="DocumentUpload">
        <label for="fileToUpload">
          <i class="archive icon"></i> Upload 1
        </label>
      </div>
      <div class="item" onclick="openDialog();">
        <label for="fileToUpload">
          <i class="archive icon"></i> Upload 2
        </label>
      </div>
      <div class="item" onclick="openDialog();">
        <label for="fileToUpload">
          <i class="archive icon"></i> Upload 3
        </label>
      </div>
    </div>
  </div>
</div> 

<form method="post" style="display: none;" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="this.form.submit();">
</form>

JavaScript

$('.ui.dropdown')
    .dropdown();