SemantiUI: Sidebar flyout menu

Question

I am trying to get a Fly-out type menu launched from a sidebar. Any ideas/examples? Wondering if Popups are an option?

Ex: When user has their mouse over the settings icon, I want a menu to "fly-out" with the 3 options..,

<div id="mnuSideNav" class="ui vertical menu labeled icon inverted sidebar">
 <div id="mnuAdmin" class="item ">
    <i class="settings icon" title="Administrative Settings"></i>
    <div id="mnuAdminItems" class="inverted 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>
</div>

Answer 1

Resolved this using a popup..,

Elements like that support overflow cannot have menus extend beyond the sidebar ("Fly-out"). So Pop-ups are the only option. Define a popup and in the javascript initializing the popup set its popup parameter..,

Ex: SideBar:

<div id="mnuSideNav" class="ui left vertical menu labeled icon inverted sidebar">  
  <a id="sbAdmin" class="browse item popupMenu">
    <i class="settings icon" title="Administrative Settings"></i>       
  </a>
</div>

Popup

<div id="adminPopup" class="ui popup  ">
  <div class="ui one column relaxed equal height left aligned grid  ">
    <div class="ui column ">
      <h4 class="ui header">Admin Menu</h4>      
    </div>
  </div>
</div>

Script:

$('.popupMenu').popup({
        popup: '#adminPopup',
        inline   : true,
        hoverable: true,
        position : 'right center',  
        delay: {show: 300, hide: 800}
    });