title: Dismiss a ui dropdown in semantic
body: <p>I need to dismiss a ui dropdown while hovering over it. Now, the ui drop down is just visible and never shows or hides when tapped or clicked. </p>
  
  <p>Here are the snippets:</p>
  
  <pre><code>&lt;div ng-show="user" class="ui pointing dropdown link item"&gt;
      &lt;span class="text"&gt;Reg&lt;/span&gt;
      &lt;i  class="dropdown icon"&gt;&lt;/i&gt;
      &lt;div class="menu transition visible"&gt;
        &lt;a class="item" href="/xyz"&gt;
          Schools
        &lt;/a&gt;
        &lt;div class="divider"&gt;&lt;/div&gt;
        &lt;a class="item" href="/xyz2"&gt;
         Admissions
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>UI drop down is initialized like this:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/dropdown.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $('.ui.dropdown')
  .dropdown();
  &lt;/script&gt;
  </code></pre>
  
  <p>What changes are needed here?</p>