Semantic UI Sidebar & Dropdown menu

Question

I am trying to create a simple web ui with semantic ui.

I want a sidebar with a menu in it in some items will have subitems... Shouldn't be that hard hu?

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

How do I get the sub-items to "fly-out" of the sidebar over the normal page content? If you click "Messages" within the example, the menu will appear (watch the scrollbar at the bottom to appear) but since those are children of the sidebar, they are being shown within the sidebar. But I want them to float over the normal content! I didn't get it to work via fiddle with the z-index.

Answer 1

if sidebar is configured to use overlay transition it can be fixed by specifying

.ui.sidebar {
    overflow: visible !important;
}

taken from here http://jsfiddle.net/59174tt1/2/