#5276 kitchen sink

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/transition.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/transition.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/dropdown.min.js"></script>
<div class="ui inverted segment">
  <div class="ui inverted dropdown">
    <div class="text">File</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">New</div>
      <div class="item">
        <span class="description">ctrl + o</span>
        Open...
      </div>
      <div class="item">
        <span class="description">ctrl + s</span>
        Save as...
      </div>
      <div class="item">
        <span class="description">ctrl + r</span>
        Rename
      </div>
      <div class="item">Make a copy</div>
      <div class="item">
        <i class="folder icon"></i>
        Move to folder
      </div>
      <div class="item">
        <i class="trash icon"></i>
        Move to trash
      </div>
      <div class="divider"></div>
      <div class="header">
          Export
        </div>
      <div class="item">Download As...</div>
      <div class="item">
        <i class="dropdown icon"></i>
        Publish To Web
        <div class="menu">
          <div class="item">Google Docs</div>
          <div class="item">Google Drive</div>
          <div class="item">Dropbox</div>
          <div class="item">Adobe Creative Cloud</div>
          <div class="item">Private FTP</div>
          <div class="item">Another Service...</div>
        </div>
      </div>
      <div class="item">E-mail Collaborators</div>
    </div>
  </div>
</div>

CSS

.ui.dropdown{cursor:pointer;position:relative;display:inline-block;outline:0;text-align:left;-webkit-transition:width .1s ease,-webkit-box-shadow .1s ease;transition:width .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,width .1s ease;transition:box-shadow .1s ease,width .1s ease,-webkit-box-shadow .1s ease;-webkit-tap-highlight-color:transparent}.ui.dropdown .menu{cursor:auto;position:absolute;display:none;outline:0;top:100%;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;margin:0;padding:0 0;background:#fff;font-size:1em;text-shadow:none;text-align:left;-webkit-box-shadow:0 2px 3px 0 rgba(34,36,38,.15);box-shadow:0 2px 3px 0 rgba(34,36,38,.15);border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;z-index:11;will-change:transform,opacity}.ui.dropdown .menu>*{white-space:nowrap}.ui.dropdown>input:not(.search):first-child,.ui.dropdown>select{display:none!important}.ui.dropdown>.dropdown.icon{position:relative;width:auto;font-size:.85714286em;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon{width:auto;float:right;margin:0 0 0 1em}.ui.dropdown .menu>.item .dropdown.icon+.text{margin-right:1em}.ui.dropdown>.text{display:inline-block;-webkit-transition:none;transition:none}.ui.dropdown .menu>.item{position:relative;cursor:pointer;display:block;border:none;height:auto;text-align:left;border-top:none;line-height:1em;color:rgba(0,0,0,.87);padding:.78571429rem 1.14285714rem!important;font-size:1rem;text-transform:none;font-weight:400;-webkit-box-shadow:none;box-shadow:none;-webkit-touch-callout:none}.ui.dropdown .menu>.item:first-child{border-top-width:0}.ui.dropdown .menu .item>[class*="right floated"],.ui.dropdown>.text>[class*="right floated"]{float:right!important;margin-right:0!important;margin-left:1em!important}.ui.dropdown .menu .item>[class*="left floated"],.ui.dropdown>.text>[class*="left...

JavaScript

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